从 reactJS 中的 JSON 文件动态导入图像

Question

我的 json 文件：(items.json)

[
    {
        "title": "Nike shoes",
        "description": "New nike shoes",
        "price": "40$",
        "image": "../../../../assets/items/nike.jpg",
        "rank": "2"
    }
]

我正在尝试将图像导入的文件：

import React from "react";
import "./style.css";
import Items from "../../../../items.json";

export default function ListedItems() {
  return (
    <div>
      <div class="container">
        {Items.map(item => (
          <div class="col-sm-4">
            <div class="panel panel-primary">
              <div class="panel-heading">{item.title}</div>
              <div class="panel-body">
              <img
                  src={require(item.image)}
                  alt="Nike image"
                />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

我收到此错误“错误：找不到模块 '../../../../assets/items/nike.jpg'” ，如果我使用 src={require('../../../../assets/items/nike.jpg')} 就可以了。

Answer 1

问题是您尝试在运行时导入图像。 您写道，您使用了 src={require('../../../../assets/items/nike.jpg')} 并且它有效。但是这段代码不起作用。

是的，您不会在浏览器控制台中出现错误，但图像也不会加载。因为require() 函数返回一个Promise。在这种情况下，您将在浏览器中看到：

<img src="[object Promise]" alt="Nike image">

1. 您可以通过将 items.json 文件从 json 更改为 js 并在此处导入图像来解决此问题。

import NikeImage from "../../../../assets/items/nike.jpg";
export const items = [
    {
        "title": "Nike shoes",
        "description": "New nike shoes",
        "price": "40$",
        "image": NikeImage,
        "rank": "2"
    }
]

并对您的组件进行一些更改：

<img src={item.image} alt="Nike image" />

但只有在你的 webpack 配置中使用 file-loader 时，此代码才有效。

1. 如果您只需要使用json 文件或从服务器获取此信息。你应该使用CopyWebpackPlugin。如果您使用create-react-app（正如您在评论中所写），它已经包含CopyWebpackPlugin，它会复制您的public 文件夹。在这种情况下，只需将您的 assets 文件夹移动到 public 并更改您的 items.json 文件

...
"price": "40$",
"image": "/assets/items/nike.jpg",
...

和你的组件：

<img src={item.image} alt="Nike image" />