版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37064409/article/details/83185807
为什么要DIY？因为我也不知道官方怎么解决的啊！ 如果你能告诉我的话，真的是帮大忙了！
问题描述
开发环境上的图片地址是放在根目录下面的，不用管，但是生产环境的地址引用一直不对！图片路径报错…
-
先来看配置文件
-
生成目录
这种形式：打包路径是对的，但是引用路径是根据publicPath来决定的。
生成的图片路径所有的都是
./images/[hash].[name].[ext]
问题来了：
问题：
- 在首页通过html标签 引用正常，因为images和html页面处在同一级
<img src="./images/c82a8cb1.logo.png" alt="logo" srcset="">
- 但是在css文件中 通过background-image:url引用的就错了
background-image: url(./images/8331fde6.osc-2.png);
正确的应该是 …/往上找一级
background-image: url(../images/8331fde6.osc-2.png);
就这个问题，没有找到解决方案,导致图片引用路径老是报错
DIY publicPath路径
既然找不到官方文档，又要解决问题就只有根据项目自己主动输出public 是"./"当前目录还是“…/”上一级目录。
配置如下：
{
test: /\.(png|jpg|gif|svg)/,
use: [{
loader: "file-loader",
options: {
name: 'images/[hash:8].[name].[ext]',
context: "dist", // 打包目录
limit: 8192,
publicPath: function (url) { // 访问目录
return url.indexOf('logo') > 0 ? './' + url : '../' + url;
}
}
}]
}
局限性
我所有页面只有logo是写在标签下的，所有只要检索到logo就可以返回./ 否则返回../
思考
1. 我看到有人讲file-loader是可以自动设置图片和字体路径的，但是我没有找到设置正确的方法
2. 在下方的链接里，也看到html-withimg-loder ，但只是解析页面的url链接的
3. 我是用的 <img src="${require('./image/logo.png')}" alt="logo" srcset="">
4. 对我来说用处也不大，希望有知道解决方案的告诉我
参考地址
webpack-file-loader 官方文档
https://webpack.js.org/loaders/file-loader/#src/components/Sidebar/Sidebar.jsx
webpack - html-loader 官方文档
https://webpack.docschina.org/loaders/html-loader/
url-loader 、file-loader 博客
https://blog.csdn.net/qq_38652603/article/details/73835153
图片的路径与打包 - 由于和我存放的路径不同，所以他讲的方案没有用到
http://www.cnblogs.com/ghost-xyx/p/5812902.html