富文本实现图片预览功能的多种方式

---

关于富文本实现图片预览功能的多种方式

在日常的开发过程中，使用富文本的实现，很多程序猿们应该都遇到过，富文本添加图片，在展示富文本内容的时候，要求点击图片，可以实现图片的预览功能，这边就给大家分享几种富文本预览图片功能的实现方式。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用Js 手写 图片的预览

html 结构

<div v-show="visible" class="z-mask" @click="visible = false">
  <div class="z-mask__img" @click.stop>
    <img :src="url" :large="url" alt="" preview="1">
  </div>
</div>

监听事件

mounted() {
	// 取到对应的富文本展示区域，添加监听事件，判断监听到点击图片，将图片的路径赋值到 url 展示
	document.getElementsByClassName('Tit-con')[0].addEventListener('click', (e)=>{
	  if (e.target.nodeName == 'IMG') {
	    this.url = e.target.currentSrc
	    this.visible = true
	  }
	});
}

二、使用JQ 实现图片预览

提示：此处利用Jq的特性，相对 js 而言 更为简便，实际原理是一致的
使用Jq的前提是 项目中要引入jQuery

html 结构 与js实现 一致

<div v-show="visible" class="z-mask" @click="visible = false">
  <div class="z-mask__img" @click.stop>
    <img :src="url" :large="url" alt="" preview="1">
  </div>
</div>

mounted() {
	$('#detail_content').on('click', 'img', (e)=>{
	  this.url = e.target.src || e.target.currentSrc
	  this.visible = true
	})
}

三 vue-photo-preview 组件

提示：该组件的好处是可以一次性加载所有富文本中的组件，前面的方法是简单的展示单个图片，此组件，展示出所有图片，可以放大缩小，还可以自由切换图片

1.引入库

代码如下（示例）：

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

2.组件注入

代码如下（示例）：

let options = {
  fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: true, //控制是否显示放大缩小按钮
  counterEl: true, //控制是否显示左上角图片数量按钮
  tapToToggleControls: false, //点击应切换控件的可见性
  clickToCloseNonZoomable: false, //点击图片应关闭图库，设置无效
  indexIndicatorSep: ' / ', //图片数量的分隔符
  bgOpacity: 0.9, // 背景透明度
}
Vue.use(preview, options)
Vue.use(preview)

3.组件的使用

<div class="Main-con">
 <div id="detail_content" class="Tit-con" v-html="info.content"></div>
</div>
<script>
export default {
	created() {
		this.info.content = this.handleHtml(this.info.content)
	},
	methods: {
		handleHtml(rich) {
	   		// 使用正则表达式匹配所有图片
	   		let imgReg = /<img.*?(?:>|\/>)/gi //匹配图片中的img标签
	   		let match = rich.match(imgReg)  //筛选出所有的img
	   		if (match) {
	     		// 循环图片数组
	     		for (let i = 0; i < match.length; i++) {
		       		const item = match[i];
		       		// 判断图片大小 100px 才预览
		       		if ($(item).width() > 100 || $(item).height() > 100) {
		         	const len = item.length;
		         	const _str = item.slice(0, len - 2) + " preview=\"0\"/>";// 追加 preview 之后的img
		         	rich = rich.replace(item, _str);
		       		}
	     		}
	   		}
	   		return rich;
	 	}
	}
}
</script>

---

总结

上述所讲到的实现方式仅供参考，不管是哪种实现方式，其实思路基本一致，都是通过点击图片，给图片添加事件，监听到该事件，然后将图片展示出来的。