Webpack 4 - 无法使用 url-loader 在 src 中加载具有绝对路径的图像

Question

我一直在努力解决 Webpack 的问题。我尝试在网上到处搜索解决方案，但未能解决我的问题。

我正在构建一个具有以下项目结构的 React 应用程序：

package.json
webpack.config.js
src
- images
- components
-- Display
--- Display.js
--- config.js
- Frame
-- Frame.js
index.js
index.html

这里是webpack.config.js：

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
    publicPath: "/"
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: "babel-loader" },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            name: "[name].[ext]"
          }
        }
      },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.json$/, loader: "json-loader" }
    ]
  },
  mode: "development",
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html"
    })
  ]
};

config.js 提供一个带有图像路径的变量 Display.js，然后将其作为道具传递给 Frame.js。 Frame.js 使用提供的路径渲染图像。

//config.js
export const imgPath = "/src/images/icon.gif";

//Display.js
import {imgPath} from "./config.js";
<Frame imgSrc={imgPath} />

//Frame.js
<img src={this.props.imgSrc} />

我面临的问题是图像 icon.gif 没有直接放入 javascript 包中，而是浏览器请求获取文件，这不是预期的行为。当我在生产模式下构建应用程序时，图像根本不显示。

有人可以帮我解决这个问题吗？基本上，我面临两个问题：

图像不是由 url-loader
图像在生产版本中根本不显示。

谢谢！

Answer 1

您必须先导入文件。但是由于你的 publicPath 设置为 '/'，并且你的图像被发送到 dist，你需要使用的图像的实际路径是 /icon.gif.

1) 导入所有可能的文件（一定要在这里使用正确的路径）

// includes.js

import './src/images/icon1.gif';
import './src/images/icon2.gif';
import './src/images/icon3.gif';

2)导出生产文件路径功能

//config.js

import './includes.js';

export const imgPathFunc = num => `/icon${num}.gif`;

3) 将其导入 Display.js

//Display.js

import { imgPath } from "./config.js";

{serverResponse && <Frame imgSrc={imgPath(serverResponse)} />}

Webpack 4 - 无法使用 url-loader 在 src 中加载具有绝对路径的图像

Webpack 4 - unable to load images with absolute path in src using url-loader

javascript

urlloader

reactjs

webpack

webpack-4