分享一下我去如何解決vue render 中 如何正確配置img的src 路徑？

一、我的項(xiàng)目中有倆層組件，

第一層父組件，第二層是render函數(shù)封裝的組件，父組件調(diào)用render函數(shù)組件

二、render函數(shù)中需要?jiǎng)?chuàng)建<img>標(biāo)簽，img中的src是父組件傳進(jìn)來(lái)的；

src正確傳進(jìn)來(lái)，圖片卻不不顯示。

三、解決辦法：

首先在父組件中將圖片import進(jìn)來(lái)，

import empty from './img/empty.png';

在父組件的data中聲明一個(gè)變量，將empty圖片引入進(jìn)來(lái)

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 } }) );

補(bǔ)充知識(shí)：VUE 為img元素動(dòng)態(tài)添加src及注意事項(xiàng)

在vue項(xiàng)目中，通常需要通過(guò)v-for 渲染多個(gè)img元素，當(dāng)我們想給每個(gè)img元素添加他們各自的src時(shí)，需要用到vue src動(dòng)態(tài)綁定

例如下面：

<img :src='http://www.aoyou183.cn/bcjs/typeIcon(tt.questionType)' alt='加載失敗'>

這里的tt 就是渲染的內(nèi)容，每個(gè)img的src需要根據(jù)tt的questionType去判斷

我們首先為這個(gè)判斷設(shè)置一個(gè)函數(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' ) } },

這里我們用一個(gè)switch 語(yǔ)句，判斷每個(gè)img對(duì)應(yīng)的src 。

這里需要注意的是：

返回src時(shí)，需要在src字符串前面加上require

最后，用 :src 綁定typeIcon

<img :src='http://www.aoyou183.cn/bcjs/typeIcon(tt.questionType)' alt='加載失敗'>

以上這篇vue render函數(shù)動(dòng)態(tài)加載img的src路徑操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。