Question

我的反应有问题，当URL存储在变量中时，我无法显示本地图片，在我的情况下，我正在使用Array.Map函数。

所以，我想构建一个Web应用程序来管理产品，因为每个产品都有一张图片，所以我自己不能导入每张图片。

因此产品对象看起来像这样：

products: {
 name: "Beer",
 beschreibung: "Gutes Bier",
 preis: 4,
 imgUrl: "./pics/Beer.png",
},

在我的“ Product.js”中，映射会抛出产品对象：

products.map(function (e, i) {
  return (
    <div className="container">
        <p>{e.name}</p>
         ...
        <img src="..."></img>
    </div>

所以我在这里尝试了几件事：

//this works fine:
<img className="img" alt="hallo" src={require("./pics/Beer.png")} />


//this don´t work:
<img className="img" alt="hallo" src={require( `${e.imgUrl}` )} />

我检查了正确的路径，因此它不是错误的URL。我在/ src中的项目树如下：

 -src
   -components
      #App.js
   -style
      #Style.css
   -data
      #Products.json   // There are my test-products saved
  -images
      #img1.jpg
      #img2.jpg
      ...

我发现当我将文件直接放置在/ src文件夹中（图像文件夹除外）时，map.function可以正常工作，因此我真的不知道该怎么办。

Answer 1

为什么不直接require()直接在产品数据中添加图片？

products: {
 name: "Beer",
 beschreibung: "Gutes Bier",
 preis: 4,
 imgUrl: require("./pics/Beer.png"),
}

假设您要将产品数据与其他所有内容捆绑在一起，则对每个imgUrl进行此操作，它应该可以正常工作。您的另一种选择是使用copy-webpack-plugin之类的东西来复制静态文件，并使用正常的相对路径URL对其进行引用。

Answer 2

如果您需要将图像作为prop传递或在其他位置使用，则可以将其存储在变量中（而不是重写require语句），然后在任何位置使用它。如果要使用webpack捆绑模块。因为Beer.png不是有效的javascript模块。 Webpack将为您解决问题。

ES6语法

import beerImage from './pics/Beer.png'; //webpack handles it no need of transpiling

ES5语法

var beerImage = require("./pics/Beer.png")

products: {
 name: "Beer",
 beschreibung: "Gutes Bier",
 preis: 4,
 imgUrl: beerImage,
}

反应|无法加载图像>找不到模块

2 个答案: