访问阿里云存储的图片URL实现在网页直接预览略缩图而不直接下载

在做谷粒学院项目时候，因为老师没有做轮播图的后台前端，这里我自己实现了一下，遇到一个问题，我先做出轮播图列表来：

这里阿里云存储的图片URL直接展示出来了，我觉得这里应该显示图片更好，
后来在网页里使用img标签：

  <el-table-column  label="图片路径" ><template slot-scope="scope"><img :src="scope.row.imageUrl"></template></el-table-column>

就很离谱，这里直接展示整张图片，后来考虑有没有可能以略缩图的形式展示，还真找到了，在阿里云图片url后面加上?x-oss-process=image/resize,m_fill,h_100,w_200即可展示略缩图，其中还可以自定义Width和Height，这里在前端直接拼接：

勉强实现效果：

参考链接：阿里云oss如何获取指定图片缩略图、视频缩略图

访问阿里云存储的图片URL实现在网页直接预览略缩图而不直接下载相关推荐

js 获取图片url的Blob值并预览
js 获取图片url的Blob值并预览 1)使用 XMLHttpRequest 对象获取图片url的Blob值参考:https://www.cnblogs.com/tujia/p/6483255.h ...
阿里云智能媒体服务 oss文档转换及预览
本人在工作中也是接触到这个需求我们本身的文档都存储在阿里云的oss上 ,由于浏览文档需要下载后观看为了方便浏览文档方便开了这样一个功能将文档转换成图片来进行预览好了废话就不多说了下 ...
使用阿里云OSS实现图片上传案例
文章目录前言一.OSS是什么? 二.使用步骤 1.开通OSS服务 2.创建bucket 3.创建子账户 4.查看帮助文档,编写后端代码 5.layui前端总结前言在正式的开发环境中,类似图片 ...
分布式电商项目二十六：使用阿里云存储的服务端签名后直传（前端联调）
使用阿里云存储的服务端签名后直传(前端联调) 在前端显示上传的界面,可以根据人人fast-vue的结构,在src\components目录下添加upload文件夹,直接添加vue组件即可,总计三个组件 ...
【OSS】服务端签名后直传实现阿里云存储上传文件
文章目录 1.前言 2.阿里云OSS 2.1.开通服务 2.2.创建Bucket 2.3.创建子账户 3.服务端 3.1.依赖导入 3.2.配置文件 3.3.控制器编写 3.4.接口测试 4.前端联调 ...
乔安监控云存储_让数据更安全可用，阿里云存储多项新功能发布
简介:9月23日,第六期阿里云存储新品发布会如约而至,带来公共云存储.混合云存储产品的最新进展与技术突破,助力用户在数字经济时代全面转型. 1.快照跨区域复制,助力企业应用快速部署阿里云快照服务采用 ...
解码2017双11:全球狂欢新记录背后的阿里云存储
摘要: 2017天猫双11再次刷新纪录,这背后是大数据的支撑和阿里云计算的能力的体现.手淘.天猫APP主站的所有图片和视频都存储在阿里云对象存储OSS之上,全球数以亿计的消费者,对这些商品的访问的流量 ...
i 智慧 | 回首30年存储演进之路再看新数据时代阿里云存储如何革故鼎新？
戳蓝字"CSDN云计算"关注我们哦! 作者 | 刘丹责编 | 阿秃出品 | CSDN云计算(ID:CSDNcloud) 人类以日新月异的速度刷新着科技的成果,其中存储的发展历史 ...
【10.23头条】阿里云存储负责人吴结生：安全可靠是云存储立身之本，智能技术将激活存储技术新变革...
戳蓝字"CSDN云计算"关注我们哦! 作者 | 刘丹责编 | 阿秃人类以日新月异的速度刷新着科技的成果,其中存储的发展历史尤其悠久,堪称万年进化史.自文明诞生以来,我们就一直 ...

访问阿里云存储的图片URL实现在网页直接预览略缩图而不直接下载

访问阿里云存储的图片URL实现在网页直接预览略缩图而不直接下载相关推荐

最新文章

热门文章