Unable to display image with dynamic path using Reactjs
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-13544开发者_StackOverflow41996-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>
))}
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
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}
精彩评论