关于Vue的“：src”绑定静态图片的问题

今天遇到一个问题，是关于在Vue的img标签中，使用：src绑定本地静态资源图片的操作

我开始在data（）中这样写的，并没有把图片加载出来：

imgUrl: ('../../../assets/Ima-swiper/swiper4.jpg')

效果如图：

随后，代码改为：

imgUrl: require('../../../assets/Ima-swiper/swiper4.jpg')

效果显示：

我很好奇这是因为什么???

当我直接在“src”中填写地址时，可以加载图片，但是使用“：src”绑定属性填写地址时，同样的地址符号，就失败了，

但是浏览器并没有报错啊~~~

 

后来我找到原因了，是因为静态资源需要放大static文中，在使用imgUrl: ('../../../assets/Ima-swiper/swiper4.jpg')就不会出错，可以把图片加载出来，如果自己创建了图片保存文件，就需要使用imgUrl: require('../../../assets/Ima-swiper/swiper4.jpg')才能把图片加载出来,但是里面只允许使用字符串字面量，所以这种方法的灵活性依旧很差。这也说明了项目文件的规范性。

 

最后。总结几个可以解决本地图片路径显示不出来的问题：

1.把图片放在src同级的static文件夹下。
2.把图片放在cdn上，把网络地址存在imgUrl里，然后直接<img :src="imgUrl">去展示。
3.图片放在assets文件夹，然后在data里面require进图片