我正在使用 webpack,只是尝试将
background-image
属性中指定的 url
应用于 html 元素。
我查看了几个线程(例如这个),但没有找到适合我的东西。
这是我的设置:
//index.js
import React from 'react'
import styles from './styles.css'
const MyComponent = () => {
return (
<div className={styles.container}></div>
)
}
export default MyComponent
// 样式.css
.container {
background-image: url('../../../static/public/images/my-background.jpg');
}
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "src", "index.js"),
output: {
path: path.join(__dirname, "dist"),
filename: "index.bundle.js"
},
mode: process.env.NODE_ENV || 'development',
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
},
devServer: {
static: path.join(__dirname, 'src')
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'static',
to: 'static'
}
]
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.(css)$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpg|png|svg|gif)$/,
use: ['url-loader', 'file-loader'],
},
],
},
}
但是,当我尝试访问该网址时,我看到的只是一个白色的小方块......
这绝对不是图像。我确实在
./dist/static/public/images/my-background.jpg
中找到了我的构建中存在的图像
请注意,图像尺寸较大:3842 × 2162
我认为这与 webpack 加载器配置有关,但没有找到如何调整它以使其在这里工作。任何帮助将不胜感激!
您可能正在使用新版本的 Webpack,其中
url-loader
和 file-loader
已弃用,Asset Modules
是替代方案。
尝试使用:
{
test: /\.(jpg|png|svg|gif)$/,
type: 'asset/resource',
},
相反。
了解更多信息点击这里。
我遇到了同样的问题,最终通过使用
~
引用项目目录并从那里访问 public
文件夹来工作。
background-image: url("~/public/images/person.png");
这对我来说效果很好:)
OR 另一种选择是将图像移动到
src
目录,webpack 会将它们打包到名为 static/media
的文件夹中作为静态文件
解决方案(使用 5.0 之前的 webpack 版本)是关闭
css-loader
的 URL 解析,因为 webpack 构建时 CSS 文件不会更新 URL 字符串
module.exports = {
...
module: {
rules: [
{ //https://webpack.js.org/loaders/css-loader/
test: /\.css$/,
use: ["style-loader"]
},
{ //https://webpack.js.org/loaders/css-loader/
test: /\.css$/,
loader: "css-loader",
options: {
url: false,
}
}
]
}
}
请注意,这将使 .css 中使用的文件不会被散列,并且在将项目构建到 /dist/ 文件夹时,其结构将类似于原始 /public/ 文件夹。这就是让它发挥作用的原因。
有关参考,请参阅 这个 github 问题 和 这个问题
另外,我正在使用:
更新:拥有使用“url-loader”的规则对象可能会覆盖其他规则中的文件。因此,在这种情况下,您应该删除它并在“css-loader”中添加选项,如下所示:
{
test: /\.css$/,
loader: "css-loader",
options: {
url: true,
esModule: false
}
}
尝试注释掉每个选项和规则,并查看结果以检查每个选项和规则的作用。在每次构建之前删除 .dist/ 文件夹(因为它不会在每次构建后自动清理),以确保您知道生成了哪些文件以及何时生成。
我刚刚从 webpack v4 升级到 v5,并且根据图像资产管理上的 webpack 文档,我必须确保 css 文件中的图像当前实际上位于我所说的位置,而不是它们所在的位置将会。
因此,更改为:
...
background: url(/static/images/header.jpg)
...
至:
...
background: url(/images/header.jpg)
...
到处都为我解决了这个问题。
大家这都是我遇到的类似问题。但是,我按照正确的顺序设置了所有内容,并将问题发布到 github 上:https://github.com/webpack/webpack/issues/18416
但是,我仍然想问,是否有人知道如何为我的 URL 提供正确的端口。因为在我的例子中,我使用两个不同的服务器,一个是通过 Xampp apache 的 python Flask,它服务器index.html,我将我的 vue 应用程序捆绑为bundle.js,并通过 webpack 在 127.0.0.1:8080 上提供它,现在我的图像有一个没有端口的 URL,当我将端口添加到 URL 时,在浏览器调试器上,我会看到我的图像。如果您需要更多详细信息,请访问该 Git 链接,我在其中提供了与我的项目相关的所有详细信息。另外,我的问题是,是否有一种方法可以告诉我的 webpack 使用哈希在 URL 上添加特定的端口号。
提前致谢。