vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值

更新時(shí)間：2024年03月04日 11:14:42 作者：左直拳

這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)img的src動(dòng)態(tài)賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue項(xiàng)目img的src動(dòng)態(tài)賦值

沒(méi)想到這破東西，居然這么折騰人。

時(shí)間緊，長(zhǎng)話短說(shuō)。

一般這個(gè)動(dòng)態(tài)賦值，要用require。

而且，這個(gè)require里，只能有一個(gè)變量，多個(gè)變量，有運(yùn)算，有方法，都不行。

1、不行

<img
  :src="require(`@/${state.path + photo.name}`)"
  :alt="photo.text"
/>

2、不行

<img
  :src="require(getPath(photo))"
  :alt="photo.text"
/>

3、可以

<img
  :src="require(`@/modules/assets/images/home/temp/${photo.name}`)"
  :alt="photo.text"
/>

vue動(dòng)態(tài)綁定img的src屬性

方法：字符串URL前加上require

具體步驟

img標(biāo)簽內(nèi)

<img :src="item.imgUrl" alt="">

imgUrl屬性內(nèi)需要用require

<img :src="item.imgUrl" alt="">

items:[
    {
        imgUrl: require("./1.png")
    },
    {
        imgUrl: require("./2.png")
    }    
]

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue中CSS動(dòng)畫原理的實(shí)現(xiàn)
這篇文章主要介紹了Vue中CSS動(dòng)畫原理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
vue在mounted中window.onresize不生效問(wèn)題及解決
這篇文章主要介紹了vue中在mounted中window.onresize不生效問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
詳解Vue的mixin策略
這篇文章主要介紹了Vue的mixin策略的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
2020-11-11
搭建element-ui的Vue前端工程操作實(shí)例
下面小編就為大家分享一篇搭建element-ui的Vue前端工程操作實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決
這篇文章主要介紹了vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue中使用typescript配置步驟
本文主要介紹了vue中使用typescript配置，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
在vue項(xiàng)目中引入高德地圖及其UI組件的方法
今天小編就為大家分享一篇在vue項(xiàng)目中引入高德地圖及其UI組件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue3超出文本展示el tooltip實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
vue中使用codemirror的實(shí)例詳解
這篇文章主要介紹了vue中使用codemirror的實(shí)例教程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-11-11
vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-08-08