Unable to display image with dynamic path using Reactjs

Question

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>
))}

DCodeMania · Accepted Answer · 2022-12-07 06:05:54Z

1

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

edited Dec 7, 2022 at 6:05

answered Dec 7, 2022 at 4:44

DCodeMania

1,1572 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rick Over a year ago

can you tell me how to add condition if todoList is not empty ? means loop should work if array(todoList is not empty)

DCodeMania Over a year ago

Update your questions for this issue.

Rick Over a year ago

Thank you for your reply but i dont want "id" , i want serial number ( like 1 , 2 , 3), Hope you understand

DCodeMania Over a year ago

Check updated again.

Sachila Ranawaka · Accepted Answer · 2022-12-07 04:44:55Z

1

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}

answered Dec 7, 2022 at 4:44

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

3 Comments

Rick Over a year ago

@Sachin Ranawaka sir, can you tell me how to add condition if todoList is not empty ? means loop should work if array(todoList is not empty)

Sachila Ranawaka Over a year ago

todoList?.image || 'other_url'

Rick Over a year ago

sir i am new in nextjs so can you please write full code and autoincrement number ( like i++) so i can print number with <td>

Collectives™ on Stack Overflow

Unable to display image with dynamic path using Reactjs

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related