vue2:p16-18 打包处理样式表中与 url 路径相关的文件 (图片等文件)
直接在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)
})