vue render函數(shù)動態(tài)加載img的src路徑操作
分享一下我去如何解決vue render 中 如何正確配置img的src 路徑？
一、我的項目中有倆層組件，
第一層父組件，第二層是render函數(shù)封裝的組件，父組件調(diào)用render函數(shù)組件
二、render函數(shù)中需要創(chuàng)建<img>標簽，img中的src是父組件傳進來的；
src正確傳進來，圖片卻不不顯示。
三、解決辦法：
首先在父組件中將圖片import進來，
import empty from "./img/empty.png";
在父組件的data中聲明一個變量，將empty圖片引入進來
empty: empty,
父組件把圖片傳給子組件，子組件為
<index-grid :empty="empty"></index-grid>
子組件在props中接收empty
props: {
empty: {
type: String
}
},
子組件可以直接使用src
img.push(
h("img", {
style: {
verticalAlign: "middle"
},
attrs: {
src: empty
}
})
);
補充知識：VUE 為img元素動態(tài)添加src及注意事項
在vue項目中，通常需要通過v-for 渲染多個img元素，當我們想給每個img元素添加他們各自的src時，需要用到vue src動態(tài)綁定
例如下面：
<img :src="typeIcon(tt.questionType)" alt="加載失敗">
這里的tt 就是渲染的內(nèi)容，每個img的src需要根據(jù)tt的questionType去判斷
我們首先為這個判斷設(shè)置一個函數(shù)，并把它綁定到img .
typeIcon:function(kind){
switch (kind){
case 1 : return require("../../assets/images/single_choice.png" )
break;
case 2 : return require( "../../assets/images/multi_choice.png" )
break;
case 3 : return require( "../../assets/images/matrix_single.png" )
break;
case 4 : return require( "../../assets/images/matrix_multi.png")
break;
case 5 :return require("../../assets/images/blank.png" )
break;
default: return require( "../../assets/images/shortAnswer.png" )
}
},
這里我們用一個switch 語句，判斷每個img對應(yīng)的src 。
這里需要注意的是：
返回src時，需要在src字符串前面加上require
最后，用 :src 綁定typeIcon
<img :src="typeIcon(tt.questionType)" alt="加載失敗">
以上這篇vue render函數(shù)動態(tài)加載img的src路徑操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在 Vue.js 中,我們可以通過自定義指令的方式來實現(xiàn)拖拽功能,使得代碼更加模塊化和可復(fù)用,本文將介紹如何基于 Vue.js 實現(xiàn)一個簡易的拖拽指令,感興趣的朋友跟隨小編一起看看吧2024-04-04
這篇文章主要來和大家一起探討一下在Vue3項目中如何處理重復(fù)渲染代碼的問題,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
這篇文章主要介紹了vue slot與傳參實例代碼講解，在文章末尾給大家介紹了vue 利用slot向父組件傳值的方法,需要的朋友可以參考下2019-04-04
深入理解使用Vue實現(xiàn)Context-Menu的思考與總結(jié)
這篇文章主要介紹了使用Vue實現(xiàn)Context-Menu的思考與總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
對于中小型企業(yè),vue應(yīng)用越來越多,學習vue相對于react的成本要低點,入門相對簡單。這篇文章主要給大家介紹了關(guān)于Vue接口封裝的相關(guān)資料,需要的朋友可以參考下2021-05-05
關(guān)于ElementUI的el-upload組件二次封裝的問題
這篇文章主要介紹了關(guān)于ElementUI的el-upload組件二次封裝的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue-cli 配置資源引用的絕對路徑的問題，本文通過圖文實例相結(jié)合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
vue.js組件vue-waterfall-easy實現(xiàn)瀑布流效果
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)瀑布流之vue-waterfall-easy的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家介紹了深入Vue3中的Mock數(shù)據(jù)模擬實現(xiàn)細節(jié)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
uniapp開發(fā)小程序的過程中主、分包有大小限制,隨著業(yè)務(wù)的增加,使用web-view加載H5的方式,往往純加載并不能滿足業(yè)務(wù)需求,這個時候就得了解小程序與H5的交互,這篇文章主要給大家介紹了關(guān)于微信小程序與webviewH5通信的踩坑記錄,需要的朋友可以參考下2024-07-07