最近用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>
Logo

前往低代码交流专区

更多推荐