首页 > 脚本专栏 > python > vue element-ui动态加载本地图片

vue+element-ui动态加载本地图片方式

2023-09-13 17:19:47 作者：苏醒的怪兽

这篇文章主要介绍了vue+element-ui动态加载本地图片方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue element-ui 动态加载本地图片

最近用element-ui实现图片展示时，发先本地的图片加载不了，一开始是这么写的

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

目录结构如下

本地加载

结果发现不对，加载不出来，一查资料，原来本地的图片要用require加载，遂改成下面代码

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

果然加载成功了

动态加载

但是我是要动态加载，因此选择将图片路径放在数据库中，数据库加载数据到变量中，最后在组件中调用

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

结果却出错了，图片加载不出来，于是又查了很多资料，原来require中不能直接用变量，这可难办了，接下来又查了很多资料，发现原来这么写就行了。

<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实现查看大图效果，直接像上面写又错了，后来发现是要再加个方括号，如下

<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实现Loading

因为做了个文件上传的功能，在文件上传过程中需要实现遮罩，等待文件上传成功之后才允许继续操作。

为了不影响页面的菜单，只控制文件上传部分，所以需要增加一个局部的loading。

需要给哪个部分加loading，就在哪个部分的标签区域用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',                    // 需要遮罩的区域
    body: true,                              
    customClass: 'mask'                     // 遮罩层新增类名
  })

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

vue+element-ui动态加载本地图片方式