vue+element-ui動態(tài)加載本地圖片方式

更新時間：2023年09月13日 17:19:47 作者：蘇醒的怪獸

這篇文章主要介紹了vue+element-ui動態(tài)加載本地圖片方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue element-ui 動態(tài)加載本地圖片

最近用element-ui實現(xiàn)圖片展示時，發(fā)先本地的圖片加載不了，一開始是這么寫的

<el-image
    class="table-td-thumb"
    :src="'../../assets/img/coca.jpg"
></el-image>

目錄結構如下

本地加載

結果發(fā)現(xiàn)不對，加載不出來，一查資料，原來本地的圖片要用require加載，遂改成下面代碼

<el-image
    class="table-td-thumb"
    :src="'require(../../assets/img/coca.jpg)'"
></el-image>

果然加載成功了

動態(tài)加載

但是我是要動態(tài)加載，因此選擇將圖片路徑放在數據庫中，數據庫加載數據到變量中，最后在組件中調用

<template slot-scope="scope">
        <el-image
          class="table-td-thumb"
          :src="require(scope.row.img)"
        ></el-image>
</template>

結果卻出錯了，圖片加載不出來，于是又查了很多資料，原來require中不能直接用變量，這可難辦了，接下來又查了很多資料，發(fā)現(xiàn)原來這么寫就行了。

<template slot-scope="scope">
        <el-image
          class="table-td-thumb"
          :src="require('../../assets/img/'+scope.row.img+'.jpg')"
        ></el-image>
</template>

將文件名作為變量前后拼接字符串，而不是直接用變量做require的參數，這樣就沒問題了。

查看大圖

成功后我還想要用preview-src-list實現(xiàn)查看大圖效果，直接像上面寫又錯了，后來發(fā)現(xiàn)是要再加個方括號，如下

<template slot-scope="scope">
        <el-image
          class="table-td-thumb"
          :src="require('../../assets/img/'+scope.row.img+'.jpg')"
          :preview-src-list="[require('../../assets/img/'+scope.row.img+'.jpg')]"
        ></el-image>
</template>

vue+ElementUI實現(xiàn)Loading

因為做了個文件上傳的功能，在文件上傳過程中需要實現(xiàn)遮罩，等待文件上傳成功之后才允許繼續(xù)操作。

為了不影響頁面的菜單，只控制文件上傳部分，所以需要增加一個局部的loading。

需要給哪個部分加loading，就在哪個部分的標簽區(qū)域用v-loading標簽，這里我在文件上傳upload組件外包了一層div：

<div class="container" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="請稍等，文件正在上傳中…">

element-loading-text="拼命加載中" 設置loading文字
element-loading-background="rgba(0, 0, 0, 0.5)" 設置loading背景
element-loading-spinner="el-icon-loading" 設置loading圖標

其他的寫法：

const loading = this.$loading({           // 聲明一個loading對象
    lock: true,                             // 是否鎖屏
    text: '正在加載...',                     // 加載動畫的文字
    spinner: 'el-icon-loading',             // 引入的loading圖標
    background: 'rgba(0, 0, 0, 0.3)',       // 背景顏色
    target: '.sub-main',                    // 需要遮罩的區(qū)域
    body: true,                              
    customClass: 'mask'                     // 遮罩層新增類名
  })