如何在webpack中成功引用到图片？

时间：2023-01-07 09:14:28

打包图片时，你可曾遇到在产出目录文件夹找不到图片，即便找到了，但是页面说引用不到资源？页面上或者文件中引用的图片地址不对？

一、在webpack中引入图片需要url-loader

//webpack配置

{
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
     loader: 'url-loader',
     options: {
         limit: 10000,
         name: path.posix.join('static', 'img/[name].[hash:7].[ext]')
      }
}

二、html中

1、link 标签图标

我的期望是打包出来的图标带有哈希值或者变成data:image/png;base64，打包路径也不会被修改。下面介绍两种方案，各有优劣。

方案A：配置插件

在配置文件中给html-webpack-plugin设置favicon参数，即可成功打包。

//修改webpack配置文件

const HtmlWebpackPlugin = require('html-webpack-plugin');

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    favicon: 'src/static/img/logo.png',
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
})

「优势」：方便快捷，可以在生产环境中成功加载图标文件，只要注意写出正确的路径即可。

「劣势」：打开本地模拟的生产环境，匪夷所思的是，图标路径是/logo.png，而不是src/static/img/logo.png，而且图标被打包的位置也不对，不是期望的地方。设置的时候，不能写哈希值，也无法变成格式。

方案B：用js修改路径

修改入口js文件，把加载结果写入标签。

//index.html
<link rel="shortcut icon" type="image/x-icon" href="" id="J_logo">

//main.js
//加载index.html的shortcut图标
import logoicon from './static/img/logo.png';
document.getElementById("J_logo").href = logoicon;

「优势」：图标路径被加载成data:image/png;base64，而且是期望的路径。

「劣势」：自己写代码，手动把图标数据填充到link标签中，这不符合vue的数据驱动视图理念，因为修改了DOM标签属性值。本来打算在index.html中用数据驱动修改，没起作用，瞬间发现那个link标签明显在vue挂载元素的外面，用vue指令毫无意义。所以喽，还是乖乖在main.js中操作吧。

我个人更倾向于方案B，因为路径看了更神秘。

方案C：用html-loader

具体用法向下看，你会找到答案。

2、img标签

webpack不识别html中img标签src引用的图片，html-webpack-plugin也做不到，此时要借助html-loader加载你的html片段，它会检查你引入的html片段里对图片的引用。

var path = require('path');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [ "html-loader" ]
      }
    ]
  },
  htmlLoader: {
    ignoreCustomFragments: [/\{\{.*?}}/],
    root: path.resolve(__dirname, '../dist'),
    attrs: ['img:src', 'link:href']
  }
};

三、css中

/*css 样式*/
.avatar {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url(../src/static/img/avatar.jpg);
  background-size: 100px 100px;
}

四、js中

import avatar from './static/img/avatar.jpg';
document.getElementById("J_avatar").href = avatar;

相关文章