问题描述
我在我的项目中使用 Webpack 4,但我在处理图像 URL 时遇到问题。我放置了 2 张图片:1 张在我的 html 中,1 张在我的 scss 条目中。只有一张图片正在渲染,我无法解析来自 CSS 的图片的 URL。
这是我的 /src 文件夹结构:
| index.html
+--js
+--scss
| +----scss/entries
| index.scss
+---img
| imgA.png
| imgB.png
| webpack.common.js
| webpack.dev.js
| webpack.prod.js
这是我对 webpack.common.js 中图片的规则
{
test: /\.(png|svg|gif|jpg)$/,use: [
{
loader: 'file-loader',options: {
name: "[name].[hash].[ext]",outputPath: "img",publicPath: './img/',}
}
],},
这是我在 index.html 中的代码的一部分
<div class="image-background"></div> //image from CSS
<img src="./img/shutter.png" alt="">
.image-background 的 .scss 是这样的:
.image-background{
background:url('./../img/imgA.png');
min-height: 300px;;
}
最后,这些是我正在使用的pugins:
"devDependencies": {
"@babel/cli": "^7.12.10","@babel/core": "^7.12.10","@babel/preset-env": "^7.12.11","babel-loader": "^8.2.2","clean-webpack-plugin": "^3.0.0","css-loader": "^5.0.1","file-loader": "^6.2.0","html-loader": "^1.3.2","html-webpack-plugin": "^4.5.1","mini-css-extract-plugin": "^1.3.4","node-sass": "^5.0.0","postcss": "^8.2.4","postcss-loader": "^4.1.0","postcss-preset-env": "^6.7.0","sass": "^1.32.5","sass-loader": "^10.1.1","style-loader": "^2.0.0","url-loader": "^4.1.1","vue-loader": "^15.9.6","vue-style-loader": "^4.1.2","vue-template-compiler": "^2.6.12","webpack": "^4.45.0","webpack-bundle-analyzer": "^4.4.0","webpack-cli": "^4.4.0","webpack-dev-server": "^3.11.2","webpack-merge": "^5.7.3"
},"dependencies": {
"vue": "^2.6.12"
}
index.html 中图像的输出是正确的,但“.image-background”div 的输出是 (./img/imgA.png) 而不是 (./../img/imgA.png);
我的问题如下:需要做什么来呈现和解析来自 .scss 条目的图像的 URL?当我们有来自不同文件夹和不同结构深度的图像时,最好的方法是什么? 如果我在其他文件夹中有模块和组件而不是条目怎么办?如何解决所有 URL?
提前谢谢?
解决方法
相对路径好像不对。
将 background:url('./../../css-img/nat.png');
改为 background:url('../../css-img/nat.png');