Vue中動態(tài)設置img的src值實現方式

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

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

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

問題

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

src數據格式

"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>

等等用了{{}}表達式的

正確的做法【:相當于bind:】

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

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

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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