關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問(wèn)題
下面看下Vue中img動(dòng)態(tài)拼接:src圖片地址,具體內(nèi)容如下所示:
使用場(chǎng)景:根據(jù)后端返回圖片標(biāo)記來(lái)匹配本地圖片資源
例如:根據(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: '庫(kù)存匯總信息', 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue render函數(shù)動(dòng)態(tài)加載img的src路徑操作
- 解決vuecli3中img src 的引入問(wèn)題
- Vue中img的src是動(dòng)態(tài)渲染時(shí)不顯示的解決
- vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫(xiě)法
- vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例
- 關(guān)于vue v-for循環(huán)解決img標(biāo)簽的src動(dòng)態(tài)綁定問(wèn)題
- Vue.js 動(dòng)態(tài)為img的src賦值方法
- vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐
相關(guān)文章
vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子
今天小編就為大家分享一篇vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11從零搭建一個(gè)vite+vue3+ts規(guī)范基礎(chǔ)項(xiàng)目(搭建過(guò)程問(wèn)題小結(jié))
這篇文章主要介紹了從零搭建一個(gè)vite+vue3+ts規(guī)范基礎(chǔ)項(xiàng)目,本項(xiàng)目已vite開(kāi)始,所以按照vite官方的命令開(kāi)始,對(duì)vite+vue3+ts項(xiàng)目搭建過(guò)程感興趣的朋友一起看看吧2022-05-05Vue結(jié)合原生js實(shí)現(xiàn)自定義組件自動(dòng)生成示例
這篇文章主要介紹了Vue結(jié)合原生js實(shí)現(xiàn)自定義組件自動(dòng)生成示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01Vue2.0 實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟
upload上傳是前端開(kāi)發(fā)很常用的一個(gè)功能,在Vue開(kāi)發(fā)中常用的Element組件庫(kù)也提供了非常好用的upload組件,這篇文章主要給大家介紹了關(guān)于elementui使用el-upload組件實(shí)現(xiàn)自定義上傳的詳細(xì)步驟,需要的朋友可以參考下2023-12-12Vue項(xiàng)目獲取url中的參數(shù)(親測(cè)可用)
這篇文章主要介紹了Vue項(xiàng)目獲取url中的參數(shù),本文通過(guò)兩種情況分析給大家詳細(xì)介紹,感興趣的朋友一起看看吧2022-08-08