Image is missing required "src" property. Make sure you pass "src" in props to the next/image component. İ got really stuck this time. i've checked everywhere but didnt fixed it

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']
},
}

CodePudding user response：

You try to render <Banner purpose={"kiralıkk"} /> without imageUrl prop given, so <Image/> gets this prop undefined