關于Vue中img動態(tài)拼接src圖片地址的問題
更新時間：2021年10月13日 14:23:03 作者：H@Z*rTE|i
這篇文章主要介紹了關于Vue中img動態(tài)拼接src圖片地址的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
下面看下Vue中img動態(tài)拼接:src圖片地址，具體內容如下所示：
使用場景：根據后端返回圖片標記來匹配本地圖片資源
例如：根據后端返回k1標記，前端生成assets/images/inventory/k1.png圖片資源路徑
<template>
<div class="fl">
<img :src="getImgUrl(gatherInfo.img1)" alt="">
<img :src="getImgUrl(gatherInfo.img2)" alt="">
<img :src="getImgUrl(gatherInfo.img3)" alt="">
</div>
</template>
data(){
return{
gatherInfo: {
title: '庫存匯總信息',
img1: 'k1',
img2: 'k2',
img3: 'k3',
},
}
}
methods里面
//獲取圖片地址
getImgUrl (img) {
return require("@/assets/images/inventory/" + img+ ".png");
},
到此這篇關于Vue中img動態(tài)拼接:src圖片地址的文章就介紹到這了,更多相關vue img動態(tài)拼接內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
目前開發(fā)大型應用，測試是一個非常重要的環(huán)節(jié)，而在 Vue 項目中做單元測試可以用 Jest，本文主要介紹了Vue-Jest 自動化測試，感興趣的可以了解一下2021-07-07
Vue中this.$router和this.$route的區(qū)別及push()方法
這篇文章主要給大家介紹了關于Vue中this.$router和this.$route的區(qū)別及push()方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要介紹了vue定時器設置和關閉頁面時關閉定時器方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了深度了解vue.js中hooks的相關知識，生命周期鉤子提供了一些 方法 ，因此你可以在組件生命周期的不同時刻精確地觸發(fā)某些操作。當我們將組件實例化時，組件會被創(chuàng)建，反之會被銷毀。,需要的朋友可以參考下2019-06-06
今天小編就為大家分享一篇關于vue中的mvvm模式講解，小編覺得內容挺不錯的，現在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家詳細介紹了如何在vue中封裝axios請求并集中管理,w文中的示例代碼講解詳細,具有一定的參考價值,有需要的小伙伴可以了解下2023-10-10
這篇文章主要為大家詳細介紹了Vue+Axios實現文件上傳自定義進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了VueJS實現用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
在本文中，我們學習了如何使用 Intersection Observer API 和?defineAsyncComponent?函數在 Vue 組件可見時對其進行懶加載，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友一起看看吧2023-09-09
使用vue-router切換頁面時，獲取上一頁url以及當前頁面url的方法
這篇文章主要介紹了使用vue-router切換頁面時，獲取上一頁url以及當前頁面url的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05