时间戳

首页 > 解决方案 > 我可以将反应道具传递给组件的下一个/图像吗

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

问题描述

我想要一个使用 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>
      )
}

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

标签： reactjstypescriptnext.js

解决方案

非常感谢安托瓦内索

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

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

推荐阅读