vue render函數動態加載img的src路徑操作

分享一下我去如何解決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='http://www.wxshucaidpc.com/bcjs/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='http://www.wxshucaidpc.com/bcjs/typeIcon(tt.questionType)' alt='加載失敗'>

以上這篇vue render函數動態加載img的src路徑操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。