Vue中使用v-html渲染图片的点击预览实战指南

一、为什么需要图片预览功能？

在Vue项目开发中，当我们使用v-html指令渲染富文本内容时，经常会遇到一个棘手问题：通过HTML字符串插入的图片无法直接添加点击事件。这会导致用户体验缺失，特别是当需要实现类似”相册画廊”的交互效果时，图片的可点击预览功能就变得至关重要。

二、v-html指令的工作原理

2.1 基本使用场景

v-html指令是Vue提供的原生指令，用于将HTML字符串渲染为真实DOM节点。常见使用场景包括：
渲染后端返回的富文本内容
动态生成带有HTML结构的提示信息
展示包含多媒体内容的文本区块

“`html

“`

2.2 安全注意事项

使用v-html时需要特别注意：
1. XSS攻击防护：永远不要直接渲染用户输入的HTML内容
2. 内容过滤推荐使用DOMPurify等专业库
3. 避免在v-html中插入样式/脚本等危险内容

三、实现图片点击预览的核心方案

3.1 事件委托方案

通过事件委托监听图片点击事件：
“`javascript
mounted() {
this.$refs.container.addEventListener(‘click’, (e) => {
if (e.target.tagName === ‘IMG’) {
this.previewImage(e.target.src)
}
})
}
“`
优势：
无需修改原始HTML内容
自动适配动态新增的图片
性能开销小

3.2 Viewer.js集成方案

使用专业的图片预览库实现专业效果：
“`javascript
import Viewer from ‘viewerjs’

mounted() {
this.viewer = new Viewer(this.$refs.container, {
toolbar: {
zoomIn: 1,
zoomOut: 1,
rotateLeft: 1,
rotateRight: 1,
}
})
}
“`

四、完整实现代码示例

4.1 安全内容渲染

“`vue