【vue】v-for循环图片加载不出来,直接在src上面写图片链接就可以加载出来,或者使用require(图片链接)可以加载出来

1、具体情况

将图片放在src/assets/img文件夹下面,循环图片的话,图片显示不出来
就像下面这样,图片是显示不出来的

<template>
  <div v-for="img_url of images">
    <img :src="img_url">
  </div>
</template>

<script>
  export default {
    data(){
	  return{
		images:['@/assets/img/kefu.png','@/assets/img/yuyue.png']
	  }
	}
  }
</script>

但是如果直接在<img/>标签上面将src定义为'@/assets/img/kefu.png'就可以显示出来,就像下面代码这样

<template>
  <img src="@/assets/img/kefu.png">
</template>

2、解决方案
(1)解决方案一

用require将src包裹起来,如下

images:[require('@/assets/img/kefu.png'),require('@/assets/img/yuyue.png')]

这样再循环图片就可以显示了

(2)解决方案二

如果不想在data中将图片路径写死,而是想放在json文件或者数据库中加载,上面这种方法就不合适了

就得看为什么本来图片加载不出来,用require将路径包裹起来才可以加载图片

因为在vue项目中,唯一可以外部访问的文件是static文件夹,src文件夹是不可以通过外部访问的,只能我们内部代码调用。

如果图片不是放在static文件夹下面,那么系统会先做一步编译工作,将图片编译成static文件夹的路径,图片才可以显示出来

这个路径我们在data中定义的是require('@/assets/img/kefu.png'),在这里被编译成了/static/img/kefu.8f8acce.png

我们直接将图片放在static文件夹下面,就不需要这部分的编译工作了

放在static文件夹之后,不需要require引用图片路径,图片也可以加载出来

<template>
  <div v-for="img_url of images">
    <img :src="img_url">
  </div>
</template>

<script>
  export default {
    data(){
	  return{
	    //将图片放在了static路径下面
		images:['/static/img/kefu.png','/static/img/yuyue.png']
	  }
	}
  }
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵宁一

点赞是最好的赞赏~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值