vue表格拼接ElementUI的el-image图片

于 2023-04-12 09:14:48 发布
阅读量730 收藏
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/maoxiaohei_/article/details/130098799
版权
该文章介绍了如何在Vue项目中，结合ElementUI的el-table-column和el-image组件，通过将变量与字符串拼接的方式设置图片的src属性，展示配电室图片。具体做法是在表格列定义中使用slot-scope，动态绑定每一行的数据(row.room_src)到el-image的src属性，图片源地址前拼接http://1047.11/。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue表格拼接ElementUI的el-image图片

:src=“变量 + ‘字符串’”

 <el-table-columnprop="box_name"
     label="配电室图片">
     <template slot-scope="scope">
     	<el-image :src="'http://1047.11/' +  scope.row.room_src"></el-image>
     </template>
 </el-table-column>
vue.2.4.0.js_Vue.js 2.0图像填充指令
cuk5239的博客
07-31 752
vue.2.4.0.js Vue图像填充 (vue-imagefill) The Vue directive for making images fill their containers. 用于使图像填充其容器的Vue指令。 安装 (Install) $ npm install vue-imagefill 用法 (Usage) <template> <div>...
elementui的el-upload图片上传到服务器的对象储存cos并且展示出来
最新发布
张羽的博客
03-10 1151
✏️ 评论，你的意见是我进步的财富！
vue+element-ui之表格中如何插入图片链接
小白要进步
11-29 1万+
1. 首先看下要实现的效果图:        2. 相关的代码(红色部分) &lt;el-table :data="banner" style="width: 100%" &gt; &lt;el-table-column prop="id" label="ID" sortable width="180"&gt; &
el-image中的src的语法
abby_yaya的博客
02-19 1466
el-image中的src问题
VUE 项目 element ui 表格实现取到后端图片数据地址实现问题（父子组件+作用域插槽）
m0_70086789的博客
07-11 598
使用作用域插槽实现后端返回的列表数据包含图片地址的情况，实现图片的动态渲染
关于vue+element-ui里el-table中动态添加图片中路径问题
weixin_45579925的博客
11-22 5559
关于vue+element-ui里el-table中动态添加图片显示问题** 使用require加载,require加载图片时可以使用相对地址 最后效果图如下
el-image动态数据返回 图片加载失败问题
weixin_45108907的博客
02-04 2112
问题： 动态返回的数据，回显图片加载失败，使用了懒加载也不行，异步加载没有刷新 解决： 使用v-if，图片存在时再渲染 <el-image style="width: 100px; height: 100px" lazy v-if="add_form_dialog.img" :src="add_form_dialog.img" :preview-src-list="[add_f.
vue2+vu3项目经验小结）
qq_41820599的博客
04-18 1129
// 上传视频 ImportExcel(file) { this.videoName = file.target.files[0].name this.file = file.target.files ? file.target.files[0] : [] var config = { onUploadProgress: (progressEvent) => { this.upload = true v
vue+element 图片加载失败处理方案--起死回生之术
weixin_44840212的博客
10-17 5867
el-image组件加载失败默认如下图：（这不是想要的结果，我想要真正加载成功的图！！！） 失败的原因最大的可能就是网速不给力、页面图片太多同时请求队尾的图片请求超时等。解决方案是请求失败的图片重新发起请求！ el-image结构代码如下：（循环生成的多张图片，同样适用于单张图片，不过单张图片无需如此麻烦） <div v-for="(item, index) in imgList" :k...
关于vue和elementui 动态路径图片展示
ldqwananxh的博客
06-28 1268
关于vue和elementui 动态图片展示 1.写代码的时候遇到Error: Cannot find module…这种错误 数据库中直接存的是一个相对路径就是这样： 2.代码是这样的：:src="require(this.item.technician.headerImg)" 3.错误是这样的： 4.于是我直接在数据库中存文件名字，然后前面的相对路径固定写死，后面打算拼接文件名字 代码改成require('../../../assets/imgupload/'+this.item.technicia
关于vue+elementui设置div背景图片填充不生效问题
菜鸡奋斗ing的博客
07-15 5949
正常css填充div图片背景 .itemDiv { background-size: 100% 100%; background-repeat: no-repeat; background-image: url(../../images/Tickets_background.png); } 但是在vue项目中不生效，需要改成如下。 .tip-div { positio...
vue使用element-ui的el-image的src问题
絔宝的博客
10-04 5789
vue使用element-ui的el-image的src问题。vue静态获取本地资源图片文件。
vue动态拼接图片路径、img地址拼接问题 [模板字符串]
热门推荐
mizuhokaga的博客
06-03 1万+
写vue写的不多,记录一下这个小坑 知识点:es6模板字符串${} (一)需求: 根据后端传的json数组的某一字段来拼接img的src路径,动态的绑定img标签的图片,图片来源本地文件夹,如果直接利用+和{{}}来拼接路径,该路径会被加载器解析成字符串 ↓json格式:根据不同的e_status拼接不同的图片 ↓本地文件夹的图片(titleicon.ico没有使用不用管) (二)解决方案 利用ES6的模板字符串进行拼接操作 模板字符串使用反引号 (`) 来代替普通字符串中的双引号和单引号。模板字
关于vue中图片地址路径的问题,框架element-ui自定义弹框，加入图片
hanyuwebant的博客
09-25 8265
先说最紧要的： 路径问题：在vue-cli3中public不被打包，src下的assets是被打包的，只能使用相对地址。最重要的是，template中img的src在打包后就变了，而动态创建的img直接加上相对地址后还是相对路径的字符串 结：动态创建的img之前需要直接引入const url = require('@/assets/logo.png')，再将地址给url； 问题1：在...
element-ui el-image 以及背景图片地址正确写法
junjiahuang的博客
08-14 6174
// data或者哪里定义一个变量 imgSrc: require(`@/assets/images/xxx.png`) <el-image :src="imgSrc"> // 直接写 <el-image :src="require(`@/assets/images/xxx.png`)"> // 背景图片 background: url(~@/assets/images/xxx.png) no-repeat center/cover; ...
在vue中封装第三方组-el-image(其他相同)
qq_42931285的博客
04-23 2029
Element组件二次封装、$atrrs高级使用、
el表达式动态拼接变量，获取值
AinUser的博客
05-24 2400
问题场景：token的传递 java后台： request.setAttribute('token_'username,token) jsp前台： <c:set var="key" scope="page" value="token_${user.username}"> <input value="${requestScope[key...
element-ui在表格里插入图片或者链接等
weixin_53663760的博客
11-19 2942
element-ui在表格里插入图片或者链接等 最近在项目中遇到一个要求，需要在表格里插入图片或者显示链接之类的，如果按照下面的方式写 <el-table-column label="博客" width="150"> <el-link type="primary" @click="seeblog(scope.row)">查看详情</el-link>
el-image 文字触发大图预览
m0_38066007的博客
12-14 1370
【代码】el-image 文字触发大图预览。
vue+elementUI使用pan-thumb禁止缓存图片
04-04
在Vue ElementUI中，可以使用v-bind指令将一个对象中的属性动态地绑定到一个元素的属性上。可以使用v-bind:style设置元素的样式，包括禁止缓存图片。 例如，可以在pan-thumb组件中使用v-bind:style来设置background-image属性： ```html <el-scrollbar> <el-scrollbar__wrap> <el-scrollbar__view> <el-image v-for="(item, index) in list" :key="index" :src="item.src" style="width: 100%; height: 100%; object-fit: contain;" > <pan-thumb :style="{ 'background-image': 'url(' + item.src + '?t=' + new Date().getTime() + ')' }" /> </el-image> </el-scrollbar__view> </el-scrollbar__wrap> </el-scrollbar> ``` 在这个例子中，使用了new Date().getTime()来生成一个随机的时间戳，将它与图片的URL拼接在一起，确保每次加载图片时都是新的URL，从而禁止图片缓存。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值