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自定義組件@click點(diǎn)擊失效問(wèn)題及解決
這篇文章主要介紹了vue自定義組件@click點(diǎn)擊失效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue?table新增、編輯，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
詳細(xì)講一講vue3下會(huì)造成響應(yīng)式丟失的情況
vue3開(kāi)發(fā)過(guò)程中,綁定的響應(yīng)式數(shù)據(jù)失去了響應(yīng)式,如何解決問(wèn)題呢,下面這篇文章主要給大家介紹了關(guān)于vue3下會(huì)造成響應(yīng)式丟失的情況,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue調(diào)試工具vue-devtools安裝及使用方法
本文主要介紹 vue的調(diào)試工具 vue-devtools 的安裝和使用，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)
這篇文章主要為大家介紹了vue修改數(shù)據(jù)視圖更新原理學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11
vue3.0使用taro-ui-vue3引入組件不生效的問(wèn)題及解決
這篇文章主要介紹了vue3.0使用taro-ui-vue3引入組件不生效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
如何使用vuejs實(shí)現(xiàn)更好的Form validation?
如何使用vuejs實(shí)現(xiàn)更好的Form validation？這篇文章主要介紹了vue-form插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題
今天小編就為大家分享一篇解決在vue項(xiàng)目中webpack打包后字體不生效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue3+ts封裝axios實(shí)例以及解決跨域問(wèn)題
在前端開(kāi)發(fā)中,使用axios進(jìn)行數(shù)據(jù)請(qǐng)求是常見(jiàn)的做法,封裝axios可以統(tǒng)一請(qǐng)求頭處理、方便接口管理、配置多攔截器等,提高代碼的可維護(hù)性和重用性,本文詳細(xì)記錄了axios的封裝過(guò)程,包括安裝、配置跨域處理、接口管理文件的創(chuàng)建等2024-09-09
Vite是一個(gè)開(kāi)發(fā)環(huán)境工具，旨在提高我們的開(kāi)發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項(xiàng)目添加vite支持的相關(guān)資料,需要的朋友可以參考下2021-09-09