reactjs 图像缺少必需的“src”属性,确保将props中的src传递给`next/image`组件,İ got really stuck this time

e3bfsja2  于 2023-06-29  发布在  React
关注(0)|答案(2)|浏览(157)

图像缺少必需的“src”属性。确保将props中的“src”传递给next/image组件。这一次真的被卡住了。我到处都检查过了,但还是没修好

import Link from "next/link";
import Image from "next/image";
import { Flex, Box, Text, Button } from "@chakra-ui/react";

const Banner = ({
  purpose,
  imageUrl,
  buttonText,
  linkName,
  title1,
  title2,
  desc1,
  desc2,
  
}) => 
  
 
   (
    <Flex flexWrap="wrap" justifyContent="center" alignItems="center" m="10">
      <Image src={imageUrl} width="500" height="300" alt="banner"/>
      <Box p="5">
        <Text color="gray.500" fontSize="sm" fontWeight="medium">
          {purpose}
        </Text>
        <Text fontSize="3xl" fontWeight="bold">
          {title1} <br /> {title2}
        </Text>
        <Text
          fontSize="lg"
          paddingTop="3"
          paddingBottom="3"
          color="gray.700"
          fontWeight="medium"
        >
          {desc1}
          <br />
          {desc2}
        </Text>
        <Button fontSize="xl" bg="blue.300" color="white">
          <Link href={linkName}>{buttonText}</Link>
        </Button>
      </Box>
    </Flex>
  );

export default function Home() {
  return (
    <div>
      <h1>Emlak Evim</h1>
      <Banner
        purpose="Ev Kirala"
        title1="Kiralık Evler"
        title2="Herkes için"
        desc1="Daireleri keşfedin"
        desc2="ve daha fazlası"
        buttonText="Kiralık Evleri keşfet"
        linkName="/search?purpose=for-rent"
        imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/145426814/33973352624c48628e41f2ec460faba4"
      />
      <Banner purpose={"kiralıkk"} />
      <Banner
        purpose="Ev Satın Al"
        title1="Bul ve Satın Al"
        title2="Hayalinizdeki Evinizi Bulun"
        desc1="Daireleri, Villaları, Yazlıkları keşfedin"
        desc2="ve daha fazlası"
        buttonText="Satılık Evleri keşfet"
        linkName="/search?purpose=for-sale"
        imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/110993385/6a070e8e1bae4f7d8c1429bc303d2008"
      />
      <Banner purpose={"kiralıkk"} />
    </div>
  );
}

// next config file.
module.exports = {
  reactStrictMode: true,
  images:{
    domains:['bayut-production.s3.eu-central-1.amazonaws.com']
},
}
ecfsfe2w

ecfsfe2w1#

您尝试在没有给定imageUrl prop的情况下渲染<Banner purpose={"kiralıkk"} />,因此<Image/>获取了此prop undefined

kh212irz

kh212irz2#

你可以这样配置next.config.js =>。const nextConfig = { reactStrictMode:Copyright © 2018 - 2019 www.bayut-production.s3.eu-central-1.amazonaws.com/image/110993385/6a070e8e1bae4f7d8c1429bc303d2008',port:'3000 ' } }

相关问题