vue页面中用v-html渲染出的图片如何实现图片预览
2020-06-06 05:27
896 查看
vue页面中用v-html渲染出的图片如何实现图片预览
最近项目提出了个新需求,公告详情里的图片要实现图片预览的功能
整个公告详情的内容是后台通过富文本编辑器上传的,我前台根据id拿到对应的公告详情,通过v-html渲染到页面上
之前实现的图片预览我是通过vant的图片预览组件(ImagePreview)实现的,接口拿到图片列表,直接应用就好了
<div class="img_wrapper" v-for="(item,index) in collInfo.imgUrls" :key="index"> <img :src="item" alt="" @click="getImg(index)"> </div> getImg(index){ ImagePreview({ images:this.collInfo.imgUrls, showIndex:true, loop:true, startPosition:index, closeable: true }) },
v-html渲染的图片进行预览要怎么办呢,百度一下呗
在v-html属性标签的父标签上添加getImg方法
<div class="page_scroll_content" @click="getImg($event)"> <div class="content-box" v-html="newsHtml"></div> </div>
getImg方法,通过$event可获取用户当前点击的元素相应的内容,这里我获取的所点击图片对应的src,再使ImagePreview方法就好
getImg($event){ // console.log($event) // console.log($event.target.currentSrc) ImagePreview({ images:[ $event.target.currentSrc ], showIndex:false }) },
这里实现的是只能拿到所点击的那一张图片的src,想要实现所有该公告所有图片的src展示轮播效果还未找到合适的方案,如果找到了,会不定时进行更新的
参考资料:
https://segmentfault.com/q/1010000016466478?utm_source=tag-newest
https://blog.csdn.net/qq_37672347/article/details/103363915
相关文章推荐
- vue.js实现数据库的JSON数据输出渲染到html页面功能示例
- 如何用C#实现动态页面aspx的静态html转换
- jsp如何实现自动生成HTML页面
- 如何实现页面中点击+号多张图片缓慢展开,再次点击×缓慢收起
- HTML--如何实现通过鼠标事件拖动页面图像(代码)
- 图片上传实现预览效果HTML5篇
- 如何在线预览github上的html页面?
- 手把手教小白如何用css+js实现页面中图片放大展示效果
- html页面中,表格数据可以固定表头,表数据部分做滚动条显示,如何实现
- C# web实现word 转Html、office转Html、pdf转图片 在线预览文件
- Asp.net实现同页面内多图片自动上传并带预览显示
- html+js实现图片上传前预先预览
- html 使用js+css+html实现图片划过预览效果
- React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用
- php使用jquery Form 实现页面无刷新上传图片,并预览图片
- 纯html实现将网页页面分享到微信朋友圈添加缩略图图片的方法
- js 实现在页面实现上传图片的预览,并判断大小
- 如何通过HTML标记或JS代码实现跳转返回页面顶部
- html页面如何实现中英文切换?
- HTML图片预览实现