溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關使用vue render函數實現動態加載img的src路徑，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
一、我的項目中有倆層組件，
第一層父組件，第二層是render函數封裝的組件，父組件調用render函數組件
二、render函數中需要創建<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元素動態添加src及注意事項
在vue項目中，通常需要通過v-for 渲染多個img元素，當我們想給每個img元素添加他們各自的src時，需要用到vue src動態綁定
例如下面：
<img :src="typeIcon(tt.questionType)" alt="加載失敗">
這里的tt 就是渲染的內容，每個img的src需要根據tt的questionType去判斷
我們首先為這個判斷設置一個函數，并把它綁定到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對應的src 。
這里需要注意的是：
返回src時，需要在src字符串前面加上require
最后，用 :src 綁定typeIcon
<img :src="typeIcon(tt.questionType)" alt="加載失敗">
上述就是小編為大家分享的使用vue render函數實現動態加載img的src路徑了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
