快捷導(dǎo)航

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

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

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

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

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

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

目錄結(jié)構(gòu)如下

本地加載

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

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

果然加載成功了

動(dòng)態(tài)加載

但是我是要?jiǎng)討B(tài)加載，因此選擇將圖片路徑放在數(shù)據(jù)庫中，數(shù)據(jù)庫加載數(shù)據(jù)到變量中，最后在組件中調(diào)用

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

結(jié)果卻出錯(cuò)了，圖片加載不出來，于是又查了很多資料，原來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的參數(shù)，這樣就沒問題了。

查看大圖

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

<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實(shí)現(xiàn)Loading

因?yàn)樽隽藗€(gè)文件上傳的功能，在文件上傳過程中需要實(shí)現(xiàn)遮罩，等待文件上傳成功之后才允許繼續(xù)操作。

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

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

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

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

其他的寫法：

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