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='http://m.4tl426be.cn/bcjs/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='http://m.4tl426be.cn/bcjs/typeIcon(tt.questionType)' alt='加載失敗'>
以上這篇vue render函數(shù)動態(tài)加載img的src路徑操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 解決Python 進程池Pool中一些坑2. Python如何讀寫CSV文件3. php網(wǎng)絡安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究4. 三個不常見的 HTML5 實用新特性簡介5. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁6. ajax請求添加自定義header參數(shù)代碼7. php測試程序運行速度和頁面執(zhí)行速度的代碼8. Python獲取抖音關(guān)注列表封號賬號的實現(xiàn)代碼9. python利用os模塊編寫文件復制功能——copy()函數(shù)用法10. Python使用jupyter notebook查看ipynb文件過程解析
