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

更新时间：2022年01月24日 14:35:56 作者：畏旧

这篇文章主要介绍了在vue中v-for循环遍历图片不显示错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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组件与生命周期详细讲解
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程,称这是Vue的⽣命周期
2022-10-10
关于vue-color-颜色选择器插件
这篇文章主要介绍了关于vue-color-颜色选择器插件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue.js将unix时间戳转换为自定义时间格式
这篇文章主要介绍了vue.js将unix时间戳转换为自定义时间格式的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
Vue+better-scroll 实现通讯录字母索引的示例代码
通讯录字母索引是常用的一种功能，本文主要介绍了Vue+better-scroll 实现通讯录字母索引，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue+canvas实现拼图小游戏
这篇文章主要为大家详细介绍了vue+canvas实现拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
vue3实现移动端滑动模块
这篇文章主要为大家详细介绍了vue3实现移动端滑动模块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
vue组件通信传值操作示例
这篇文章主要介绍了vue组件通信传值操作,结合实例形式分析了vue.js父子组件通信及兄弟组件通信相关操作技巧,需要的朋友可以参考下
2019-01-01
vue el-row中ul间距问题
这篇文章主要介绍了vue el-row中ul间距问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
关于vue3编写挂载DOM的插件问题
这篇文章主要介绍了vue3编写挂载DOM的插件的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-07-07
vue select二级联动第二级默认选中第一个option值的实例
下面小编就为大家分享一篇vue select二级联动第二级默认选中第一个option值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01