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

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

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

目录结构如下

本地加载

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

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

果然加载成功了

动态加载

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

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

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

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

将文件名作为变量前后拼接字符串，而不是直接用变量做require的参数，这样就没问题了。

查看大图

成功后我还想要用preview-src-list实现查看大图效果，直接像上面写又错了，后来发现是要再加个方括号，如下

<template slot-scope="scope"><el-imageclass="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+element-ui 动态加载本地图片相关推荐

vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png' ...
剖析Picasso加载压缩本地图片流程（解决Android 5.0部分机型无法加载本地图片的问题）
之前项目中使用Picasso遇到了一个问题:在Android 5.0以上版本的部分手机上使用Picasso加载本地图片会失败.为了解决这个问题,研究了一下Picasso加载和压缩本地图片的流程,才有了 ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Android插件化开发之动态加载本地皮肤包进行换肤
Android插件化开发之动态加载本地皮肤包进行换肤前言: 本文主要讲解如何用开源换肤框架 android-skin-loader-lib来实现加载本地皮肤包文件进行换肤,具体可自行参考框架原理进行 ...
可以加载本地图片和网络资源的轮播图：TuTu
轮播图可以加载本地图片或者网络资源的无限循环的轮播图,一行代码调用,图片三级缓存,节省流量,间隔自己设置,使用方便. 1.你只要写好布局就行,布局写成啥样你自己决定,扩展性强,满足多样化需求例如: ...
ImageSwitcher加载本地图片和网络图片实现图片切换
加载本地图片 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...
android picasso 显示本地图片,剖析Picasso加载压缩本地图片流程（解决Android 5.0部分机型无法加载本地图片的问题）...
之前项目中使用Picasso遇到了一个问题:在Android 5.0以上版本的部分手机上使用Picasso加载本地图片会失败.为了解决这个问题,研究了一下Picasso加载和压缩本地图片的流程,才有了 ...
Qt学习之使用QListWidget加载本地图片实现双击放大
目录一.前言二.实现效果三.代码实现 (1)QListWidget的使用 1.QListWidget初始化 2.QListWidget加载本地图片 3.QListWidget样式表设计 4.QL ...
UIWebView如何加载本地图片
UIWebView如何加载本地图片 UIWebView加载本地图片是有实用价值的.比方说,有时候我们需要本地加载静态页来显示相关帮助信息,而这些帮助信息当中含有很多很多的富文本,用代码实现难度较大,这 ...

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

本地加载

动态加载

查看大图

vue+element-ui 动态加载本地图片相关推荐

最新文章

热门文章