vue項目實現(xiàn)img的src動態(tài)賦值
更新時間：2024年03月04日 11:14:42 作者：左直拳
這篇文章主要介紹了vue項目實現(xiàn)img的src動態(tài)賦值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項目img的src動態(tài)賦值
沒想到這破東西，居然這么折騰人。
時間緊，長話短說。
一般這個動態(tài)賦值，要用require。
而且，這個require里，只能有一個變量，多個變量，有運算，有方法，都不行。
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動態(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中CSS動畫原理的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue在mounted中window.onresize不生效問題及解決
這篇文章主要介紹了vue中在mounted中window.onresize不生效問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue的mixin策略的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
下面小編就為大家分享一篇搭建element-ui的Vue前端工程操作實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯誤的解決
這篇文章主要介紹了vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯誤的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹了vue中使用typescript配置，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
今天小編就為大家分享一篇在vue項目中引入高德地圖及其UI組件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3超出文本展示el tooltip實現(xiàn)示例
這篇文章主要為大家介紹了vue3超出文本展示el tooltip實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了vue中使用codemirror的實例教程，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue實現(xiàn)商品加減計算總價的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08