在一个vue文件中使用图片<img src="../images/3.png" >
路径都没问题,但是显示不出来,折腾了很久。
image.png
检查元素显示:
<img data-v-37548562="" src="[object Module]" alt="">
查了很多资料,有说是file-loader的问题,有说是路径的问题,反复试验,最后是要使用url-loader ,并且需要在webpack.config.js中加上配置:
esModule: false
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [{
loader: 'url-loader',
// loader: 'file-loader',
options: {
esModule: false, // 这里设置为false
name: '[name].[ext]',
limit: 10240
}
}]
}
重新run dev 就好了image.png
image.png
就是把不使用任何file-loader或者url-loader,也可以编译成功!虽热不知道原理。。。但是图片真的又出来了,神奇,有人知道了告诉我哈!
顺便记录一下重新run dev 出现的错误:
image.png
|ttf
即可。