Unable to display image with dynamic path using Reactjs-CodePudding

I am working on Reactjs and i am using nextjs framework,Right now i am trying to fetch image data from database using axios,I am using loop for fetch image,Image in database is like "http://xxxxxxxxxxxxxxxx/upload/blog/1669111567istockphoto-1354441996-170667a.jpg" means i am getting full path of image,But whenever i am trying to fetch data then i am getting following error

Error: Invalid src prop ...on `next/image`, hostname "diggdevelopment.com" is not configured under images in your `next.config.js`

Also i want if array(todoList) is not empty then loop should work(add condition if array not empty) and want to show number of records ( like 1 2 3 etc..) I tried with following code

{post.map(todoList => (
    <td><Image src={todoList.image} width={5}
    height={50}/> </td>
))}

CodePudding user response：

Open your next.config.js file and put your domain where images are stored like below:

const nextConfig = {
  reactStrictMode: true,
  presets: ["next/babel"],
  images: {
    domains: [
      "diggdevelopment.com",
    ]
  }
};

module.exports = nextConfig;

You can check if post is empty or not using below codes:

{post.length > 0 ? (
  post.map((todoList, index) => (
    <td key={index 1}>
      <Image src={todoList.image} width={5} height={50} />
    </td>
  ))
) : (
  <p>No data</p>
)}

index will give you numeric value from 0 to the length of the array

CodePudding user response：

Need to add the loader function

This will generate the URLs for your image. It appends a root domain to your provided src

<td><Image loader={() => todoList.image} src={todoList.image} width={5}