广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >在vue中v-for循环遍历图片不显示错误的解决方案
  • 522
分享到

在vue中v-for循环遍历图片不显示错误的解决方案

2024-04-02 19:04:59 522人浏览 泡泡鱼
摘要

目录v-for循环遍历图片不显示错误错误Vue本地图片路径正确,但for循环不显示经过改正加个require()就可以显示了v-for循环遍历图片不显示错误 <template

v-for循环遍历图片不显示错误

<template>
	<div class="demo" :style="{width:innerWidth} + 'px' ">
		<div class="carousel-inner">
			<div v-for="(img,i) of imgs" :key="i" class="carousel-item" :style="{width:innerWidth} + 'px' ">
				<img :src="img.src" :style="{width:innerWidth} + 'px' ">
			</div>
		</div>
	</div>
</template>
<script>
export default{
data(){
	return{
		innerWidth:window.innerWidth,
		i:0,
		imgs:[
			{src:"/img/20200908111741.jpg"},
			{src:"/img/20200908111804.jpg"},
			{src:"/img/20201013163954.jpg"},
		]
	}
}
}
<script>

错误

之前图片存放的地址是…/assets/avatar/

将图片放在静态资源public目录下,创建一个img目录

然后直接从跟开始获取 /代表从跟获取

vue本地图片路径正确,但for循环不显示

今天for循环图片的时候,发现图片不显示,以下是代码

<div v-for="(item,index) in img">
 	<img :src="item.imc" width="80" height="80"></img>
</div>
img:[{imc:'./ww.png'},{name:'./imc.png'}],

在这里插入图片描述

看了看代码路径也是正确的,而且单个是能显示的,可for循环之后图片就显示不出来了

最后发现单个显示的跟for循环显示的图片路径不一样

单个图片

for循环显示

经过改正加个require()就可以显示了

<div v-for="(item,index) in img">
 <img :src="item.imc" width="80" height="80"></img>
 </div>
img:[{imc:require('./ww.png')},{imc:require('./ww.png')}],

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 在vue中v-for循环遍历图片不显示错误的解决方案

本文链接: https://www.lsjlt.com/news/163580.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 在vue中v-for循环遍历图片不显示错误的解决方案
    目录v-for循环遍历图片不显示错误错误vue本地图片路径正确,但for循环不显示经过改正加个require()就可以显示了v-for循环遍历图片不显示错误 <template...
    99+
    2022-11-13
  • Vue中实现v-for循环遍历图片的方法
    目录v-for循环遍历图片的方法解决方法如下vue循环显示多个图片小扩展(require 和 import)v-for循环遍历图片的方法 写项目时,遇到后台无法提供背景图片,需要自己...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作