vue渲染数据时，v-html中的图片如何点击放大 以及 markdowm数据中的图片点击如何放大

已于 2023-08-29 09:18:38 修改
阅读量491 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
于 2023-08-07 13:37:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54027065/article/details/132144262
版权

记录一下在部署博客的时候，文章中的内容点击图片不能放大的问题。

效果展示：http://zfc.life/sm

我先展示实现的代码

1、template
在这里插入图片描述
2、data
在这里插入图片描述

3、created
在这里插入图片描述
4、methods
在这里插入图片描述
上面的代码不是我写的，我只是在原有代码上加了个点击图片放大的效果！

效果

1、先看看数据，可以看出来明显的区别。
![在这里插入图片描述](https://img-blog.csdnimg.cn/513118dff9af4c40afabd05deed1ae36.png
2、效果图展示
在这里插入图片描述
测试了，pc端和手机端都能正常展示。

扩展

1、官方使用 https://element.eleme.cn/#/zh-CN/component/image
在这里插入图片描述
2、参考解决方案地址：https://juejin.cn/post/7140998122112712734

3、markdown-it 中文文档 https://markdown-it.docschina.org/api/MarkdownIt.html#markdownit-new

時間-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue-photo-preview 异步图片放大失效的问题
10-15
然而，当处理异步加载的图片时，可能会遇到图片放大失效的问题。本文将详细探讨这个问题，并提供解决方案。 首先，`vue-photo-preview`在处理异步加载的图片时，如果图片数据在预览组件初始化后才获取，可能无法...
vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用
最新发布
10-17
Vue3 V-Md-Editor是基于Vue3的Markdown编辑器组件，它提供了强大的Markdown编辑功能，同时集成了一款名为VMdPreview的预览组件，使得用户在编写Markdown文本时能够实时预览效果。这两个组件极大地提高了开发人员在...
vue通过v-html渲染富文本内容，给渲染出的图片添加大图预览功能
梦雨的博客
01-18 4009
当我们渲染富文本的时候，免不了会插有图片，如果想给图片一个预览功能就可以点击事件配合element预览组件来实现！引入element图片预览组件 并注册 //element组件自带图片预览组件由于ie兼容问题则没有展示该组件。这样就可以实现v-html渲染给图片添加大图预览功能了！
markdown中图片自动点击放大（使用sphinx build）
cout<<"Hello World!";
10-22 1046
markdown使用sphinx build出来的页面中所有图片自动点击放大， 无须手写js
Markdown给图片添加超链接，点击图片后，跳转新页面。放大缩小图片。
pipizhou16的博客
10-14 4119
公司用Markdown写了个项目说明 有个需求，就是点击图片，跳转到图片的链接（因为markdown不能放大缩小图片） ![alt属性文本](图片地址 ''图片title'') alt属性文本，相当于对图片内容的解释。 图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加 图片的地址，可以是本地图片，也可以是网络图片地址 大象图片 Typora 给图片添加超链接，点击图片后，跳转页面的同时图片放大到全屏居中。 下面是我的测试代码Markdown和HTML： 1、HTML 测试代
Marked.js渲染下md内图片点击放大解决方案
AsterCass的博客
08-26 330
本站使用的是markdown文档存储，将文档提交到前端后，前端使用marked.js做html页面主渲染，由和等插件包辅助渲染我们在文档中常常需要插入图片，图片如果在网站页面上没有任何反馈，那么这个网站的交互就算不上理想，这里本来想看看marked有没有现成的插件包以供使用，但是试了几个效果都不是很理想，需要调整，这个功能也不是特别麻烦，我们这里就自己实现了。
html v-html点击富文本图片放大 缩放
q4717529的博客
08-08 698
代码】html v-html点击富文本图片放大 缩放。
[绍棠]vue 富文本 v-html 点击图片 放大预览展示功能
绍棠的博客
08-30 900
html部分 注册方法 <!-- 新增点击富文本图片放大功能 --> <div class="page_right_new_detail_content" v-html="detailContent?detailContent.context:''" @click="showImg($event)"> 放大展示区dialog <!-- 富文本图片放大 --> <div class="imgDolg" v-s...
详解vue中v-model和v-bind绑定数据的异同
10-14
本篇文章将深入解析Vue中的两种主要数据绑定方式：`v-model` 和 `v-bind`，以及它们之间的异同。 `v-bind`（通常简写为 `:`）主要用于单向数据绑定，即将Vue实例中的数据属性绑定到HTML元素的属性上。例如，使用 `v...
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
10-14
在Vue.js中，`v-for`指令用于循环渲染列表数据，而通过添加点击事件，我们可以实现用户交互，例如点击某一行获取该行的数据。本文将详细介绍如何在Vue中使用`v-for`结合点击事件来获取当前行的数据以及事件对象。 ...
VUE解决 v-html不能触发点击事件的问题
10-16
在Vue.js开发过程中，有时候会遇到一个问题，即使用`v-html`指令插入动态HTML内容时，这些内容中的事件监听器（如点击事件）无法正常触发。这是因为Vue.js的模板编译机制不处理`v-html`插入的纯HTML字符串，它们被视...
vue点击单张图片放大（纯js）
weixin_44856917的博客
01-31 5973
vue点击单张图片放大（纯js）
记录使用vue elementUI实现在v-html为图片设置可点击放大的功能
weixin_42931681的博客
11-10 1331
在v-html中实现图片点击放大的功能
uniapp开发H5 或vue的v-html富文本，给图片添加事件，点击图片放大.
--=
03-01 2694
uniapp开发H5 或vue的v-html富文本，给图片添加事件，点击图片放大.
vue 富文本 v-html 点击图片 放大预览展示功能
qq_43358160的博客
03-06 2661
html部分 注册方法 <!-- 新增点击富文本图片放大功能 --> <div class="wendang" v-html="content" @click="showImg($event)"></div> 放大展示区dialog <!-- 富文本图片放大 --> <div class="imgDolg" v-show="imgPreview.show" @click.stop="imgPreview.show = false">
实现v-html中多图片点击放大预览
陈皮糖的博客
10-28 1870
v-html点击图片预览
marked.js读取markdown文件，图片实现点击放大
个人博客
12-14 6236
使用marked解析markdown文件并实现图片点击放大效果
Typora配置双击图片放大的功能(详细教程)
weixin_43654989的博客
03-24 3522
解决Typora默认无法放大图片的问题，github下载插件配置双击放大图片功能！！
mavon-editor 使用教程
chelflan's blog
08-02 9911
mavon-editor是一款基于vue的markdown编辑器，比较适合博客系统。由于官网对于一些细节的说明不够详细，这里对这里对该编辑器的使用做一个总结。 1. 安装 2. 基本使用 3. 图片上传(含服务端) 安装 npm install mavon-editor --save 基本使用 在vue-cli构建的脚手架离得main.js可以像这样...
vue更新数据时v-if
08-01
引用[1]:当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。[1]引用[3]:v-if指令通过创建和销毁DOM来显示或者隐藏DOM元素。v-if可以和v-else-if和v-else一起搭配使用。v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。[3] 根据引用[1]和引用[3]的内容，当Vue更新数据时，如果使用了v-if指令，Vue会根据条件的值来创建或销毁DOM元素来显示或隐藏DOM元素。如果条件为true，则创建DOM元素并显示；如果条件为false，则销毁DOM元素并隐藏。这样可以根据数据的变化动态地显示或隐藏元素。同时，v-if指令可以与v-else-if和v-else一起使用，用于实现多个条件的判断和显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值