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

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

一、在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;
上一篇:小米9屏下指纹判断


下一篇:How to pronounce symbols on keyboard