vue render函數(shù)動(dòng)態(tài)加載img的src路徑操作

更新時(shí)間：2020年10月26日 10:17:41 作者：zj張靜

這篇文章主要介紹了vue render函數(shù)動(dòng)態(tài)加載img的src路徑操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

分享一下我去如何解決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)來的；

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

三、解決辦法：

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

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

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

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

例如下面：

<img :src="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="typeIcon(tt.questionType)" alt="加載失敗">

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

您可能感興趣的文章:

相關(guān)文章

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