Vue中動態(tài)設(shè)置img的src值實(shí)現(xiàn)方式

更新時間：2025年09月19日 09:05:54 作者：乘風(fēng)御浪云帆之上

在Vue中動態(tài)綁定img的src屬性時,需使用v-bind或:語法,確保數(shù)據(jù)為有效字符串或URL格式,避免編譯錯誤,開發(fā)環(huán)境通過顏色區(qū)分錯誤類型,有助于快速定位問題

Vue中動態(tài)設(shè)置img的src值

問題

循環(huán)li組件時，動態(tài)設(shè)置img
設(shè)置img時，src屬性報錯

src數(shù)據(jù)格式

"companyImages":[
    "http://localhost:8080/cszj/image/image?image=2757dcrz7e0v5stxwqsvd4dk4ezdvvqo",
    "http://localhost:8080/cszj/image/image?image=3757dcrz7e0v5stxwqsvd4dk4ezdvvqo"
]

錯誤的做法

<li v-for="(item,idx) in company_images">
    <img id="company_image" src="{{item}}"/>
    <el-button>刪除</el-button>
</li>

<li v-for="(item,idx) in company_images">
    <img id="company_image" src="{{item.toString()}}"/>
    <el-button>刪除</el-button>
</li>

<li v-for="(item,idx) in company_images">
    <img id="company_image" :src="{{item.toString()}}"/>
    <el-button>刪除</el-button>
</li>

<li v-for="(item,idx) in company_images">
    <img id="company_image" src="{{company_images[idx]}"/>
    <el-button>刪除</el-button>
</li>

<li v-for="(item,idx) in company_images">
    <img id="company_image" :src="{{company_images[idx]}"/>
    <el-button>刪除</el-button>
</li>

等等用了{(lán){}}表達(dá)式的

正確的做法【:相當(dāng)于bind:】

<li v-for="(item,idx) in company_images">
    <img id="company_image" :src="item"/>
    <el-button>刪除</el-button>
</li>

其實(shí)在編譯環(huán)境下通過顏色是有區(qū)別的

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Vue中v-if與v-show的使用區(qū)別及應(yīng)用場景解讀
本文詳細(xì)介紹了Vue開發(fā)中v-if和v-show的使用方法和性能區(qū)別,幫助開發(fā)者根據(jù)場景選擇合適的條件渲染指令,v-if通過添加/移除DOM元素實(shí)現(xiàn)條件渲染,適用于不常切換的場景；v-show通過CSS控制顯示/隱藏,適用于頻繁切換的場景
2026-01-01
Vue2.0實(shí)現(xiàn)簡單分頁及跳轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)簡單數(shù)據(jù)分頁，及頁數(shù)的跳轉(zhuǎn)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
vue3使用ref和reactive的示例詳解
Vue 3引入了兩個新的API,ref和reactive,用于創(chuàng)建響應(yīng)式對象,這兩個方法都位于Vue.prototype上,因此可以在組件實(shí)例中直接使用,本文給大家介紹vue3使用ref和reactive的示例,感興趣的朋友跟隨小編一起看看吧
2023-10-10
vue項(xiàng)目根據(jù)不同環(huán)境進(jìn)行設(shè)置打包命令的方法
這篇文章主要介紹了vue項(xiàng)目根據(jù)不同環(huán)境進(jìn)行設(shè)置打包命令,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-11-11
watch(監(jiān)視屬性)和computed(計算屬性)的區(qū)別及實(shí)現(xiàn)案例
watch和computed是vue實(shí)例對象中的兩個重要屬性，watch是監(jiān)視屬性，用來監(jiān)視vue實(shí)例對象上屬性和方法的變化，computed被稱為計算屬性，可以將data對象中的屬性進(jìn)行計算得到新的屬性，這篇文章主要介紹了watch(監(jiān)視屬性)和computed(計算屬性)的區(qū)別,需要的朋友可以參考下
2023-05-05
基于vue2.0實(shí)現(xiàn)簡單輪播圖
這篇文章主要為大家詳細(xì)介紹了基于vue2.0實(shí)現(xiàn)簡單輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
vue實(shí)現(xiàn)公共方法抽離
這篇文章主要介紹了vue實(shí)現(xiàn)公共方法抽離，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
淺談Vue父子組件和非父子組件傳值問題
本篇文章主要介紹了淺談Vue父子組件和非父子組件傳值問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-08-08
vue之?dāng)?shù)據(jù)代理詳解
這篇文章主要為大家介紹了vue之?dāng)?shù)據(jù)代理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
探索?Vue.js?組件的最新特性(最新整理)
本文將深入探討 Vue.js 組件的一些最新特性,包括組合式 API、Teleport、Suspense 等,幫助開發(fā)者更好地掌握和運(yùn)用這些特性,從而構(gòu)建出更加高效、復(fù)雜的前端應(yīng)用,感興趣的朋友一起看看吧
2025-07-07