0

Simply I wanna display images that I'm receiving through props

import Image from "next/image";
import classes from "./book-item.module.css";

export default function FoodItems(props) {
    return (
        <li className={classes.product__item}>
            <Image
                src={props.imageUrl}
                alt={props.title}
                className={classes.image}
                width={100}
                height={100}
            />
            <h3>{props.title}</h3>
            <p>{props.price}</p>
        </li>
    );
}

I'm getting this error from the above code:-

enter image description here

Mohit
  • 135
  • 10

1 Answers1

1

Your error clearly states what you are missing i.e you need to add allowed domains for images to load from in next.config.js file.

  • Open next.config.js file
  • Add images: { domains: ["itbook.store"], }, add all the domains from where you load images in this array
Mohammed Junaid
  • 1,362
  • 14
  • 18
  • these are the image which are coming from API, how can I create array of it here? – Mohit Dec 11 '22 at 09:12
  • You just need to add domain name.. not the whole url.. e.g : if all images are coming from `itbook.store` domain then the above snippet in answer is enough. – Mohammed Junaid Dec 11 '22 at 20:58
  • I've tried that but still getting the same error, please check my next.config.js file here:- https://github.com/mohitdevelops/book-store-app/blob/main/next.config.js – Mohit Dec 12 '22 at 19:15
  • make sure you stop the nextjs server and restart it, since editing next config files requires a server restart – Mohammed Junaid Dec 16 '22 at 20:42