vue动态加载图片

vue动态加载图片失败

最近在项目中遇到了一个问题，图片加载不出来。

发现这个问题我立刻F12查看代码，结果如图：

从代码来看，这处标签并没有问题，那么可能是图片有问题吗？带着这个问题我回到vscode编辑器，左alt点击地址，正确跳转到图片。

到这里我也没什么想法，于是就到网上查找，幸运的是这个问题很快就搜到了。原来是动态加载的锅，这里我是绑定的data数据，以此来动态加载图片。

使用require导入图片

在html代码里写是不会有问题的

<img src='../assets/images/music-cover.jpg' alt >

图片是可以正常加载出来的

将src attribute 绑定到组件属性

这里需要使用到require导入

cover: require('../assets/images/music-cover.jpg');

然后绑定到src上

<img :src='cover'>

这样才可以加载出来

结语

很懒，更新很少，坚持好难啊！