前不久才学的webpack配置,图片处理配置如下:
{
test:/\.(jpg|jpeg|png|gif)$/,
use:[
{
loader:"url-loader",
options:{
name:"[name]-[hash:5].min.[ext]",
limit:500,
}
}
]
}
然后就以为项目中使用图片都会这么处理(很菜的行为,大神勿喷),后来自己测试时在入口文件中app.js添加
var img=new Image();
img.src="./assets/images/test.png"
document.body.appendChild(img)
打包访问页面发现图片路径不对,打包dist中也没有对应文件;
几经百度才发现这问题其实都不算时问题,提问的很少,作为菜鸟的我只是在这记录下,希望有朝一日我变大神后能回头看来一笑而过;
最后总结的是:直接在模板文件中img.src这种行为其实就是静态引入文件没有经过webpack处理难道还想出结果?可笑
正确的方法是:import img from ''./assets/images/test.png"或者在css文件中定义(当然你的webpack有处理css-loader等)