Webpack 4 - 如何解析不同的 img URL

Posted 2023-02-22

【中文标题】Webpack 4 - 如何解析不同的 img URL

【英文标题】：Webpack 4 - how to resolve different img URLs

【发布时间】：2021-05-02 14:06:05

【问题描述】：

我在我的项目中使用 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" >

.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？

提前谢谢????

【参考方案1】：

好像相对路径不对。

将background:url('./../../css-img/nat.png'); 更改为background:url('../../css-img/nat.png');

【讨论】：

是的，抱歉，我在描述整个问题时出错了。我仍然有同样的问题。