欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2022-07-21 11:09:29|栏目:vue|点击:

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')}],

在这里插入图片描述

上一篇:vue实现一个矩形标记区域(rectangle marker)的方法

栏    目:vue

下一篇:vue+eslint+vscode配置教程

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

本文地址:http://www.codeinn.net/misctech/208426.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有