next.js 无法使用Reactjs显示具有动态路径的图像

c86crjj0 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(174)

我在Reactjs上工作，我正在使用nextjs框架，现在我正在尝试使用axios从数据库中获取图像数据，我正在使用循环获取图像，数据库中的图像类似于“http：//xxxxxxxxxxxxxxxxxxxx/upload/blog/1669111567istockphoto-1354441996-170667a.jpg”，这意味着我正在获取图像的完整路径，但每当我尝试获取数据时，我都会收到以下错误

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

我还希望如果数组（todoList）不为空，那么循环应该工作（如果数组不为空，则添加条件），并希望显示记录数（如1、2、3等）。

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

next.js

来源：https://stackoverflow.com/questions/74711842/unable-to-display-image-with-dynamic-path-using-reactjs

2条答案

按热度按时间

mzsu5hc01#

打开你的next.config.js文件，并把你的域图像存储如下：

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

module.exports = nextConfig;

您可以使用以下代码检查帖子是否为空：

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

索引将为您提供从0到数组长度的数值

赞(0）回复(0）举报 2022-12-12

kyxcudwk2#

需要添加loader函数
这将为您的图像生成URL。

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

赞(0）回复(0）举报 2022-12-12

我来回答

next.js 无法使用Reactjs显示具有动态路径的图像

2条答案

相关问题

热门标签

最新问答