在微信h5富文本中预览图片

最新推荐文章于 2025-06-26 20:16:35 发布

原创最新推荐文章于 2025-06-26 20:16:35 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#富文本 #图片预览 #微信h5 #vuex

本文介绍在微信H5环境中，如何实现富文本中的图片点击预览功能，包括解析富文本获取图片源、使用微信JDK文件、绑定点击事件及解决长按图片问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在微信h5中，点击图片是不能直接预览图片的，那么如何在后台返回的富文本中点击img预览图片呢？

1.拿到后台返回的富文本数据，通过正则取出所有img标签里的src并存到新的数组里
以下代码写在ajax成功的回调函数里

 		let imgs = Response.content.match(/<img[^>]+>/g);
 		//Response.content为富文本数据
        let arrImg = [];
          for (var j = 0; j < imgs.length; j++) {
            // 正则匹配，摘出img标签下的src里的内容，即capture
            imgs[j].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(
              match,
              capture
            ) {
              arrImg.push(capture);
            }); // 
          }
          this.arrImg = arrImg;
          把数组存到vue的data里

2.引入微信jdk文件
在index.html文件中引入


<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

3.给img绑定点击事件
在钩子函数mounted中写上

	//注意：每个页面最多只能绑定一次click，否则会有点击图片多次预览的问题，所以让以下代码只执行一次，
    let click = that.$store.getters.getbindclick; //获取vuex中的click状态值
    //没有绑定click则执行
    if (!click) {
      $(document).on("click", ".Detailswrapper .d_c_con img", function(e) {
        let nowImgurl = $(this).attr("src");
        console.log(nowImgurl);
        wx.previewImage({
          urls: that.arrImg,
          current: nowImgurl
        });
      });
      that.$store.commit("bindclick", true);//设置vuex中的click状态值
    }

然后预览就可以预览了，but…
当我长按图片(ios端,Android端没有问题)时会弹出微信浏览器自带的菜单，然后想再次点击图片预览时，发现不能预览了，经过反复测试，是因为长按图片的默认事件会使我给img动态绑定的click失效。解决办法：
事件委托

	html
	
	<div
    class="d_c_con"
    v-html="data.content"
    :style="{height:height}"
    v-if="data.content_type"
    @click='previewImage($event)'
    >{{data.content}}</div>
    
    js
    
	previewImage(e){
      let that =this;
      let nowImgurl = e.target.currentSrc;
        console.log(e.target);
        if(nowImgurl){
          wx.previewImage({
          urls: that.arrImg,
          current: nowImgurl
        });
        }
    }

通过给内容块的div绑定点击事件，可以获取到当前div下目标对象，比如p div 或者我们的点击到的图片img，
e.target.currentSrc是img的src，具体的其他的属性可以在控制台自己打印看看，拿到你想要的东西就行，注意的是不能用document.on()方法去做事件委托，不然也不会生效，最好是当前页面已经存在的标签，而不是动态添加的。