<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>

錯(cuò)誤

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

將圖片放在靜態(tài)資源public目錄下，創(chuàng)建一個(gè)img目錄

然后直接從跟開(kāi)始獲取 /代表從跟獲取

vue本地圖片路徑正確，但for循環(huán)不顯示

今天for循環(huán)圖片的時(shí)候，發(fā)現(xiàn)圖片不顯示,以下是代碼

<div v-for="(item,index) in img">
 	<img :src="item.imc" width="80" height="80"></img>
</div>

img:[{imc:'./ww.png'},{name:'./imc.png'}],

在這里插入圖片描述

看了看代碼路徑也是正確的，而且單個(gè)是能顯示的，可for循環(huán)之后圖片就顯示不出來(lái)了

最后發(fā)現(xiàn)單個(gè)顯示的跟for循環(huán)顯示的圖片路徑不一樣

單個(gè)圖片

for循環(huán)顯示

經(jīng)過(guò)改正加個(gè)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')}],

在這里插入圖片描述

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能(代碼示例)
Vue是一種流行的JavaScript框架,可以幫助開(kāi)發(fā)者建立高效的Web應(yīng)用程序,本文將為您介紹如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能,并為您提供具體的代碼示例,感興趣的朋友一起看看吧
2023-11-11
vue實(shí)現(xiàn)下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉菜單效果，運(yùn)用了hover顯示與隱藏以及定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
Vue3中vuex的基本使用方法實(shí)例
Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于Vue3中vuex的基本使用方法,需要的朋友可以參考下
2022-04-04
使用vue-router設(shè)置每個(gè)頁(yè)面的title方法
下面小編就為大家分享一篇使用vue-router設(shè)置每個(gè)頁(yè)面的title方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
解決vue生產(chǎn)環(huán)境,頁(yè)面卡死的問(wèn)題
這篇文章主要介紹了解決vue生產(chǎn)環(huán)境,頁(yè)面卡死的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法
下面小編就為大家分享一篇vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
LogicFlow內(nèi)置插件使用實(shí)例
這篇文章主要為大家介紹了LogicFlow內(nèi)置插件使用實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹(shù)形菜單(demo)
通過(guò)本文給您演示一下如何有效地使用遞歸組件，我將通過(guò)建立一個(gè)可擴(kuò)展/收縮的樹(shù)形菜單的來(lái)一步步進(jìn)行。下面通過(guò)本文給大家分享用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹(shù)形菜單，需要的朋友參考下吧
2017-12-12
詳解Vue.js Class與Style綁定
這篇文章主要為大家介紹了Vue.js Class與Style綁定的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-01-01
vue模式history下在iis中配置流程
這篇文章主要介紹了vue模式history下在iis中配置流程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04