首页 > 其他分享> > vue2:p16-18 打包处理样式表中与 url 路径相关的文件（图片等文件）

vue2:p16-18 打包处理样式表中与 url 路径相关的文件（图片等文件）

2022-03-20 10:35:16 作者：互联网

直接在js导入图片会报错，原因wp处理不了

ERROR in ./src/imgs/avatar.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

1.安装依赖

npm i url-loader file-loader -D

2.webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下

module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            //【1】单位byte,小于10240字节图片转为base64格式
            {test:/\.jpg|png|gif$/,use:'url-loader?limit=60000'}
        ]
    }

其中 ? 之后的是 loader 的参数项：
⚫ limit 用来指定图片的大小，单位是字节（byte）
⚫ 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片类似如下
data:img/jpg;base64,iVBORw0KGg...

3.index.html放入容器

<img src="" class="avatar">

4. index.js向容器动态放图片

import $ from 'jquery' //【1】
import Avatar from './imgs/avatar.png' //【2】

$(function(){
    $('li:odd').css('background-color','lightgray')
    $('li:even').css('background-color','lightblue')
    //【3】
    $('.avatar').attr('src',Avatar)
})

5.重启项目：npm run dev 即可看到图片