How to use NextJS Image Component to display images receiving through props?

Question

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:-

Answer 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