使用 Webpack 解析 css 背景图像 url

Question

我正在使用 webpack，只是尝试将属性background-image中指定的内容url应用于 html 元素。

\n

我已经查看了几个线程（例如这个线程），但没有找到适合我的东西。

\n

这是我的设置：

\n

// 索引.js

\n

import React from \'react\'\nimport styles from \'./styles.css\'\n\nconst MyComponent = () => {\n  return (\n    <div className={styles.container}></div>\n  )\n}\n\nexport default MyComponent\n

\n

// 样式.css

\n

.container {\n  background-image: url(\'../../../static/public/images/my-background.jpg\');\n}\n

\n

// webpack.config.js

\n

const path = require(\'path\');\nconst HtmlWebpackPlugin = require("html-webpack-plugin");\nconst CopyWebpackPlugin = require(\'copy-webpack-plugin\');\n\nmodule.exports = {\n  entry: path.join(__dirname, "src", "index.js"),\n  output: {\n    path: path.join(__dirname, "dist"),\n    filename: "index.bundle.js"\n  },\n  mode: process.env.NODE_ENV || \'development\',\n  resolve: { \n    modules: [path.resolve(__dirname, "src"), "node_modules"],\n  },\n  devServer: {\n    static: path.join(__dirname, \'src\')\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n        template: path.join(__dirname, "src", "index.html"),\n    }),\n    new CopyWebpackPlugin({\n      patterns: [\n        {\n          from: \'static\',\n          to: \'static\'\n        }\n      ]\n    })\n  ],\n  module: {\n    rules: [\n        { \n            test: /\\.(js|jsx)$/, \n            exclude: /node_modules/, \n            use: ["babel-loader"] \n        },\n        {\n            test: /\\.(css)$/,\n            use: ["style-loader", "css-loader"],\n        },\n        {\n          test: /\\.(jpg|png|svg|gif)$/,\n          use: [\'url-loader\', \'file-loader\'],\n        },\n    ],\n},\n}\n

\n

当到达本地主机时，我确实看到路径正在解析：\n

\n

然而，当我尝试访问该网址时，我看到的只是一个白色的小方块......

\n

\n

这绝对不是图像。我确实发现我的构建中存在该图像./dist/static/public/images/my-background.jpg

\n

请注意，图像尺寸较大：3842\xe2\x80\x8a\xc3\x97\xe2\x80\x8a2162

\n

我认为这与 webpack 加载器配置有关，但没有找到如何调整它以使其在这里工作。任何帮助将不胜感激！

\n

Answer 1

您可能正在使用新版本的 Webpack，其中url-loader和file-loader已被弃用，并且Asset Modules是替代方案。

尝试使用：

{
      test: /\.(jpg|png|svg|gif)$/,
      type: 'asset/resource',
},

反而。

欲了解更多信息，请点击此处。