从 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>  );}如果我使用 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" />

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

如果您必须仅使用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" />