關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問題

更新時(shí)間：2021年10月13日 14:23:03 作者：H@Z*rTE|i

這篇文章主要介紹了關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

下面看下Vue中img動(dòng)態(tài)拼接:src圖片地址，具體內(nèi)容如下所示：

使用場景：根據(jù)后端返回圖片標(biāo)記來匹配本地圖片資源
例如：根據(jù)后端返回k1標(biāo)記，前端生成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");
    },

到此這篇關(guān)于Vue中img動(dòng)態(tài)拼接:src圖片地址的文章就介紹到這了,更多相關(guān)vue img動(dòng)態(tài)拼接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue-Jest 自動(dòng)化測試基礎(chǔ)配置詳解
目前開發(fā)大型應(yīng)用，測試是一個(gè)非常重要的環(huán)節(jié)，而在 Vue 項(xiàng)目中做單元測試可以用 Jest，本文主要介紹了Vue-Jest 自動(dòng)化測試，感興趣的可以了解一下
2021-07-07
Vue中this.$router和this.$route的區(qū)別及push()方法
這篇文章主要給大家介紹了關(guān)于Vue中this.$router和this.$route的區(qū)別及push()方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
vue定時(shí)器設(shè)置和關(guān)閉頁面時(shí)關(guān)閉定時(shí)器方式
這篇文章主要介紹了vue定時(shí)器設(shè)置和關(guān)閉頁面時(shí)關(guān)閉定時(shí)器方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
深度了解vue.js中hooks的相關(guān)知識
這篇文章主要介紹了深度了解vue.js中hooks的相關(guān)知識，生命周期鉤子提供了一些方法，因此你可以在組件生命周期的不同時(shí)刻精確地觸發(fā)某些操作。當(dāng)我們將組件實(shí)例化時(shí)，組件會被創(chuàng)建，反之會被銷毀。,需要的朋友可以參考下
2019-06-06
vue中的mvvm模式講解
今天小編就為大家分享一篇關(guān)于vue中的mvvm模式講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
詳解如何在vue中封裝axios請求并集中管理
這篇文章主要為大家詳細(xì)介紹了如何在vue中封裝axios請求并集中管理,w文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下
2023-10-10
Vue+Axios實(shí)現(xiàn)文件上傳自定義進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Vue+Axios實(shí)現(xiàn)文件上傳自定義進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
VueJS實(shí)現(xiàn)用戶管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了VueJS實(shí)現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
Vue組件懶加載的操作代碼
在本文中，我們學(xué)習(xí)了如何使用 Intersection Observer API 和?defineAsyncComponent?函數(shù)在 Vue 組件可見時(shí)對其進(jìn)行懶加載，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友一起看看吧
2023-09-09
使用vue-router切換頁面時(shí)，獲取上一頁url以及當(dāng)前頁面url的方法
這篇文章主要介紹了使用vue-router切換頁面時(shí)，獲取上一頁url以及當(dāng)前頁面url的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05