Vue 通过 v-bind 绑定图片src的两种方式

前提声明

这个问题的解决是在vue-cli3下，因为问候提到的public文件夹是3版本产生的

在学习vue时，有一个需求是需要 v-for 循环图片，之后用一个图片地址数组通过（v-bind）去绑定图片的src，这个地方有一个大坑

---

错误写法

//错误写法
<div id='app'>
	
	<img v-for="(mysrc, index) in srcs" :key="index" :src="mysrc">
div>

var app = new Vue({
 el : '#app',
 data : {
 srcs: ['相对地址一','相对地址二']
}) 

错误原因

这种写法主要错在data里面的 srcs的地址，在通过v-for循环绑定图片的src的时候，vue会把相对地址解析为一个字符串，而非一个地址这就导致图片无法加载

解决方式

1. 把图片放入 vue-cli3 自动生成的public下，不用src中的相对路径。
   mysrc:[’…/’…/assets/img1.png,’…/…/assets/img2.png’]
   改为
   mysrc:[‘images/img.png’,‘images/img.png’]

   vue-cli3默认路径为public，所有无需添加public。images是我手受添加到public的文件夹

   ---

2. 使用 require方法返回的绝对地址。如果一定要用src相对路径方式，给路径前加上** require() ** 方法。
   mysrc:[’…/’…/assets/img1.png,’…/…/assets/img2.png’]
   改为
   mysrc:[require(’…/’…/assets/img1.png’),require(’…/…/assets/img2.png’)]

注意事项

在使用第二种方法时，require() 内部只能写入 字符串常量，无法写入变量，所以想要通过存字符串变量数组的话，变量的值需要是public的路径才可以