分享一下我去如何解決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路徑操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。