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ù)，并把它綁定到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函數(shù)動態(tài)加載img的src路徑操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue使用showdown并實現(xiàn)代碼區(qū)域高亮的示例代碼
這篇文章主要介紹了vue使用showdown并實現(xiàn)代碼區(qū)域高亮的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了vue數(shù)據(jù)push后不能響應式更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了6個vue前端常用的工具類,可直接復用,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
Vue的生命周期就是vue實例從創(chuàng)建到銷毀的全過程,也就是new Vue() 開始就是vue生命周期的開始。Vue 實例有?個完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom -> 渲染、更新 -> 渲染、卸載 等?系列過程,稱這是Vue的?命周期2022-11-11
這篇文章主要介紹了vue打包npm run build時候界面報錯的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家介紹了vue組件prop驗證作用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue計算屬性與監(jiān)視(偵聽)屬性的使用,計算屬性指的是通過一系列運算之后，最終得到一個值，watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對數(shù)據(jù)的變化做特定的操作，本文就這兩種屬性給大家詳細講解，感興趣的朋友一起學習吧2022-11-11
當用戶在網(wǎng)站登錄后,服務器會在其瀏覽器上設置一個包含登錄信息的Cookie,通過這個Cookie,服務器能夠識別用戶是否已登錄,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue前端框架搭建過程，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08