日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 Vue 正文

在vue中v-for循環遍歷圖片不顯示錯誤的解決方案_vue.js

作者:畏舊 ? 更新時間: 2022-04-06 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')}],

在這里插入圖片描述

原文鏈接:https://blog.csdn.net/Janner668/article/details/114713450

欄目分類
最近更新