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">

您可以通过将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时，此代码才有效。

如果仅需使用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" />

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

1 个答案: