Vue如何在data中正常引入图片路径

在Vue项目中通过data设置图片路径，然后在template中引入后页面无法显示图片，浏览器控制台报错：

9C6841E276FD48B78DD921610478D61B.jpg

刚开始以为是路径出问题了，于是绝对路径、相对路径各种办法试了一遍，发现还是报错，后来才发现这是因为在Vue里动态生成的路径无法被url-loader解析到，此时有两种解决方法：

方法一.直接将你的图片源文件放在项目目录的static文件夹里，然后和正常写图片路径那样写就可以了：

1B7770B508D44F838BC44A4C86F4E3A3.jpg 4EC3615D363F47F5B34F899DE2AC9735.jpg

方法二.通过import的方法将图片源路径引入，如下图所示：

DD25DE9B4ED04F008F17C3D608109A62.jpg

需要注意的是：在Vue里图片是通过v-bind绑定src属性的，所以template模板上的img标签并不是src=""，而是v-bind:src=""或简写为:src=""，如果这里写错了，那无论如何都无法正常引入图片。