Question

我想要一个使用 next 的 Image 组件的卡片组件。但是，Image 上的 src 道具不接受我传下来的道具。

import React from 'react'
import { Childs } from '../../interfaces/childs'

import Image from 'next/image'

interface CardProps {
      img: string 
      header: string
      body: string
}

export default function Card({ img, header, body }: CardProps): JSX.Element {
      return (
            <div className=" 
            flex items-center justify-center 
            rounded-lg shadow-lg
            bg-blue-200

            ">
                  <div className="w-2/5 ">
                        <Image
                              src={img}
                              alt="Picture of the author"
                              width={"auto"}
                              height={"auto"}
                        />
                  </div>
                  <div className=" grid grid-cols-1 w-3/5 ">
                        <div className="py-4" >
                              {header}
                        </div>
                        <div className="py-4"  >
                              {body}
                        </div>
                  </div>

            </div>
      )
}

错误：next/image 上的 src 属性 (https://i1.sndcdn.com/avatars-000422928436-y1ke6o-t500x500.jpg) 无效，您的 next.config.js 中的图像未配置主机名“i1.sndcdn.com” 查看更多信息：https://err.sh/next.js/next-image-unconfigured-host

Answer 1

非常感谢 Antoineso

添加 root/next.config.js 文件。

//next.config.js
module.exports = {
      images: {
        domains: ['myimageresources.com'],
      },
    }

我可以将反应道具传递给组件的下一个/图像吗

1 个答案: