React 在使用 require 时不显示 img，可能是 webpack 设置问题

Question

我正在尝试使用 map function 从对象数组构建轮播。 其中一个对象是图像源。 出于某种原因，使用 require 指定 img src 不再有效。 这是显示问题的代码片段。

    import myImg from '../images/myImg.jpg';
    ....
    <img src={myImg} alt="This message is not expected to show"></img>
    <img src="../images/myImg.jpg" alt="This message is expected to show"></img>
    <img src={require("../images/myImg.jpg")} alt="Fails when message shows"></img>

结果是：

第一张图片显示时没有替代消息（这是预期的）

第二张图片不显示。 显示的替代消息是：“This message is expected to show”

第三张图片不显示。 显示的替代消息是：“消息显示时失败”

我怀疑我的 wordpack.config 设置有问题。 我正在使用文件加载器。 代码片段是：

        loaders: [
  {
    test: /.s?css$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
  },
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      'file-loader',
    ],
  }
],

文件加载器是错误的选择吗？ 我的设置错了吗？ 我在没有文件加载器的情况下尝试了这个并得到了相同的结果。 这很奇怪，因为几个月前使用 require 为 img 指定文件 src 曾经工作过。

Answer 1

答案是使用 require('pathname').default 与 require('pathname')。 不需要文件加载器和 webpack。

Require 返回一个模块与 uri。 require 的其中一种方法是 default。

我发现了这个

console.log(require("./images/img.jpg"));

这将返回一个模块而不是 uri。 在控制台中打开模块显示了可用的方法。

然后我尝试了 console.log(require("./images/img.jpg").default); 这会将与导入时相同的 uri 返回到 static 图像。

使用 require 与 import 的明显优势是 require 是动态执行的。 提供的路径可以来自数组或 object。例如

var img = ["img0.jpg", "img1,jpg", "img2.jpg" ]; 变种我= 1; <img src={require( ./images/ ${i}).default} alt="一些消息"/>