vue/vant获取富文本中的图片预览

简介: vue/vant获取富文本中的图片预览

这是一个模板字符串的标签里面有很多张图片,我们想通过字符串渲染并且预览图片

var htmlString = `
  <p class="p1">
  <img src="https://i8.mifile.cn/v1/a1/9c3e29dc-151f-75cb-b0a5-c423a5d13926.webp">
  <img src="https://i8.mifile.cn/v1/a1/f442b971-379f-5030-68aa-3b0accb8c2b9.webp">
  <img src="https://i8.mifile.cn/v1/a1/63b700b6-643e-ec18-fdf3-da66b4b4173f.webp">
  <img src="https://i8.mifile.cn/v1/a1/e9dbf276-193e-11c4-99a6-3097fde82350.webp">
  <img src="https://i8.mifile.cn/v1/a1/1249d3ee-2990-a2b4-28d9-f719c2417b1f.webp">
  <img src="https://i8.mifile.cn/v1/a1/97c79915-64b2-808c-53b4-4345652a179f.webp">
  <img src="https://i8.mifile.cn/v1/a1/cd0fbe1e-a1b3-a87a-f4a6-6fb08ec54931.webp">
  </p>`;

通过v-html渲染标签元素

<div v-html="img" @click="imageChgange($event)"></div>
 img: "",

mouted中绑定这个变量

this.img = htmlString;

效果:

5746300e30584998b7b482d404b08dfe.png

重点来了!!

这里需要点击屏幕上的每张图片,点击后将只预览本图片,而且能对应上这个富文本的图片预览

一、给div设置点击事件,传一个$event

efd2e66d65904812b4aee3b03002096a.png

二、获取e.target.currentSrc路径

打印出e看一下是什么东西

6ce787adb7fc4947800ec252aca8ed1f.png

我们就从e里面获取富文本中的路径也就是 e.target.currentSrc (获取当前点击后的图片路径)

console.log(e.target.currentSrc);

打印看是否能找到正确的路径

ef94b43c617f497380e539aeff45722a.png

找到之后就好办了,接着往下看。

三、通过vant使用图片预览功能

vant中组件调用使用方法如下:

52537dc0cdea4a9c8a77d37be4e0307a.png

需要引入一下vant中的图片预览插件

import { ImagePreview } from "vant";

3369b6216d914205bbc7fc06de93f21a.png

if (e.target.nodeName == "IMG") { //判断他的类型是不是img
        ImagePreview({
          images: [e.target.currentSrc], //e.target.currentSrc  当前图片src
          showIndex: false,
          loop: false,
        });
      } else {
        return;
      }

整段代码如下:

imageChgange(e) {
      console.log(e);
      console.log(e.target.currentSrc);
      if (e.target.nodeName == "IMG") {
        ImagePreview({
          images: [e.target.currentSrc], //e.target.currentSrc  当前图片src
          showIndex: false,
          loop: false,
        });
      } else {
        return;
      }
    },

实现效果如下:

3c6426e977e54ba881e5cd93ed402078.gif

目录
打赏
0
0
0
0
5
分享
相关文章
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
157 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
72 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
86 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
82 1
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
112 58
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
69 1
vue学习第一章

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等