使用webpack导入动态文件，做出反应，表达

Question

关于使用webpack＆express动态图像文件的问题：当前，仅处于开发模式，因此所有内容都是本地的。

我正在浏览要在其中使用产品的id动态引用静态文件的产品列表：

{products.map(product => {
   return (
      ...
      <img src={`../../../../public/assets/img/prod_${product.id}.jpg`}></img>
      ...
    );
})}

在我的webpack配置中：

const webpack = require("webpack");
const merge = require("webpack-merge");
const baseConfig = require("./webpack.config.base");

module.exports = merge(baseConfig, {
  mode: "development",
  entry: {
    app: ["webpack-hot-middleware/client"],
  },
  output: {
    path: __dirname,
  },
  devtool: "inline-source-map",
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: '"dev"',
      },
    }),
  ],
});

如果我尝试使用上面的JSX标记中所示的直接图像路径URL，它将返回404。

我不确定这是创建动态文件源的正确方法。过去，对于静态文件，我将使用import image1 from "../../assets/img/image1.jpg，然后在标记中使用image1。

我尝试了require.context：const pathToImgs = require.context("./use/path", true);，但没有成功：

找不到模块'prod_1.jpg'

最近，我尝试在渲染之前将所有导入添加到JS文件中：

import prod_1 from "./assets/img";
import prod_2 from "./assets/img";
import prod_3 from "./assets/img";
import prod_4 from "./assets/img";
import prod_5 from "./assets/img";
import prod_6 from "./assets/img";

在这种情况下，捆绑包失败：

找不到模块：错误：无法解析'/ Users / admin / devProj / shopping_cart / src / scripts / features / ProductsList'中的'./assets/img'

我的公共道路出了什么问题？

Answer 1

看起来像Dynamically Loading Local Images with ReactJS的副本。

[请检查您是否为require.context提供了正确的路径