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

我一直在努力解决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} />

//config.js
export const imgPath=“/src/images/icon.gif”；
//Display.js
从“/config.js”导入{imgPath}；
//Frame.js

我面临的问题是，image

icon.gif

没有放在javascript包中，而是浏览器请求获取文件，这不是预期的行为。在生产模式下构建应用程序时，根本不显示图像

谁能帮我把这个弄对吗？基本上，我面临两个问题：

url加载器不会使图像内联

这些图像在生产构建中根本不显示

---

谢谢大家!

您必须先导入文件。但是由于您的

publicPath

被设置为“/”，并且图像被发送到

dist

，因此您需要使用的图像的实际路径是

/icon.gif

1） 导入所有可能的文件（请确保在此处使用正确的路径）

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)} />}

//Display.js
从“/config.js”导入{imgPath}；
{serverResponse&&}

您必须先导入文件。但是由于您的

publicPath

被设置为“/”，并且图像被发送到

dist

，因此您需要使用的图像的实际路径是

/icon.gif

1） 导入所有可能的文件（请确保在此处使用正确的路径）

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)} />}

//Display.js
从“/config.js”导入{imgPath}；
{serverResponse&&}

Change

url loader

loader to

file loader

我想具体使用

url loader

来减少请求数量。但是，我曾尝试使用

文件加载程序
，但遇到了相同的问题。config.js中的imagePath是什么类型的？它是一个字符串。我在代码中犯了一个错误，但现在已经修复了。@Jspake你的意思是问题现在已经修复了吗？将
url loader
loader更改为
file loader
我想具体使用
url loader
，以减少请求数量。但是，我曾尝试使用
文件加载程序
，但遇到了相同的问题。config.js中的imagePath是什么类型的？它是一个字符串。我在代码中犯了一个错误，但现在已经修复了。@Jspake你是说问题已经修复了吗？谢谢你的回答！对于第（1）部分，我是否需要将其导入
config.js
？此外，我也尝试过使用导入图像的方法。然而，对于我的案例来说，这并不是一个简单的解决方案，因为我正在
config.js
中动态生成路径。类似于，
export-const-imgPath=“/icon”+{some variable}+.gif”
，并且有许多这样的图像。对不起，我应该在我的问题中说明这一点。有没有其他方法可以解决这个问题？@Jspake是的，您需要先导入它们。您知道要导入的所有图像的名称和路径吗？是的，我知道路径名称。但是要渲染的图像会根据我从服务器接收到的数据不断变化。这就是问题所在。@Jspake在这种情况下，您必须确保从服务器获得的任何映像路径都已包含在生成中。我的意思是，服务器只给我一个形成映像路径所需的变量。我并没有从服务器上得到完整的路径谢谢你的回答！对于第（1）部分，我是否需要将其导入
config.js
？此外，我也尝试过使用导入图像的方法。然而，对于我的案例来说，这并不是一个简单的解决方案，因为我正在
config.js
中动态生成路径。类似于，
export-const-imgPath=“/icon”+{some variable}+.gif”
，并且有许多这样的图像。对不起，我应该在我的问题中说明这一点。有没有其他方法可以解决这个问题？@Jspake是的，您需要先导入它们。您知道要导入的所有图像的名称和路径吗？是的，我知道路径名称。但是要渲染的图像会根据我从服务器接收到的数据不断变化。这就是问题所在。@Jspake在这种情况下，您必须确保从服务器获得的任何映像路径都已包含在生成中。我的意思是，服务器只给我一个形成映像路径所需的变量。我实际上没有从服务器获取整个路径