vue3循環(huán)展示圖片實現(xiàn)過程
更新時間：2025年05月28日 14:35:19 作者：Hero_rong
這篇文章主要介紹了vue3循環(huán)展示圖片實現(xiàn)過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3循環(huán)展示圖片
如圖：
根據(jù) id 循環(huán)展示圖片，網(wǎng)上搜了很多教程統(tǒng)統(tǒng)沒有成功，終于自己踩坑踩好了，刷到位這個帖子的兄弟姐妹有福啦?。?！
關(guān)鍵代碼1
里面有兩個參數(shù)，第一個參數(shù)是當(dāng)前圖片的地址，換成你自己的，第二個照寫不用改
const getImageUrl=(name)=>{
return new URL(`../../assets/images/home/${name}`, import.meta.url).href
}關(guān)鍵代碼2
注釋的地方，可以先寫一個能展示出來的圖片地址，保證地址沒問題，這樣直接把當(dāng)前地址復(fù)制到 getImageUrl 方法里面就行
<!-- <div><img src="../../assets/images/home/home.png" alt="" /></div> -->
<div><img :src="getImageUrl('home.png')" alt="" /></div>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3.0中setup中異步轉(zhuǎn)同步的實現(xiàn)
這篇文章主要介紹了vue3.0中setup中異步轉(zhuǎn)同步的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
VueJs單頁應(yīng)用實現(xiàn)微信網(wǎng)頁授權(quán)及微信分享功能示例
本篇文章主要介紹了VueJs單頁應(yīng)用實現(xiàn)微信網(wǎng)頁授權(quán)及微信分享功能示例，具有一定的參考價值，有興趣的可以了解一下2017-07-07
Vue?Router中router.resolve方法使用實例
這篇文章主要給大家介紹了關(guān)于Vue?Router中router.resolve方法使用的相關(guān)資料,router.resolve方法在前端路由庫中用于解析路由信息,接受路徑或路由對象,返回解析后的?URL、路由和位置對象,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了Vue實現(xiàn)路由跳轉(zhuǎn)至外界頁面方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue作為一款流行的前端框架,提供了一種數(shù)據(jù)驅(qū)動的方式來實現(xiàn)目錄樹,本文主要介紹了vue?目錄樹的展開與關(guān)閉的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-11-11
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于Vue中狀態(tài)管理器(vuex)詳解以及實際應(yīng)用場景的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了使用Vuex解決Vue中的身份驗證問題,本文通過文字實例相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧2018-09-09
el-table-column疊加el-popover使用示例小結(jié)
el-table-column有一列展示多個tag信息,實現(xiàn)點擊tag展示tag信息以及tag對應(yīng)的詳細(xì)信息,本文通過示例代碼介紹el-table-column疊加el-popover使用示例小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04
ESLint是一個代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關(guān)于Vue項目中ESLint配置(VScode)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04