当前位置: 首页 > 工具软件 > V-IM > 使用案例 >

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

季稳
2023-12-01

前提声明

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

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


错误写法

//错误写法
<div id='app'>
	<!-- 通过v-for循环遍历data中的地址 并绑定 -->
	<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的路径才可以

 类似资料: