微信公众号文章图片禁止点击，屏蔽点击文章图片查看大图

有的时候做长图文章的时候为了让效果非常惊艳，不是很想让用户能点击图片，因为点击图片会造成浏览文章时的体验割裂，贴别是在有些情况下切图并不是根据图片内容来的时候，点击图片会削弱用户的期待感和神秘感。有的时候做的很酷的效果用户一点轻易发现原理就会削弱用户的兴奋和喜悦。

那么如何禁止图片点击呢？苹果的做法是使用svg标签。

样式预览

《阿年》全网首映，iPhone 带着新的传说来了。

公众号预览

不得不说苹果在公众号这块玩的出神入化。

实现方式

首先你需要一个支持代码编辑的Chrome插件，在微信公众号上通过代码来进行编辑。这里的话我是使用的一款叫壹伴的插件（不建议开会员，白嫖不香吗）

壹伴插件官网

安装成功之后我们进入到微信公众号后台就可以看到多了一排工具栏，我们选择代码编辑的方式。

微信公众号代码编辑

我们可以观察一下当我们插入一张图片的时候HTML编辑器会多出来以下的代码

1
2
3

<p style="text-align: center">
  <img data-s="300,640" data-galleryid="" data-type="png" class="rich_pages wxw-img" src="https://mmbiz.qpic.cn/sz_mmbiz_png/wHO7ItbaYgqAyc280uvbPXjBA4ia63ibYeKeYNibgaSW21ia2X7wuxtSFMfQ4rVqRmIKYAcrKR535Bb4xwdibjrHv1Q/0?wx_fmt=png" style="" data-ratio="0.62" data-w="600" data-imgqrcoded="1">
</p>

我们发现公众号其实就是插入了一个img标签。我们需要用svg来替换掉img标签，svg的代码如下

1
2
3

<p style="text-align: center">
  <svg viewBox="0 0 600 372" style="display: block;background-image: url(&quot;https://mmbiz.qpic.cn/sz_mmbiz_png/wHO7ItbaYgqAyc280uvbPXjBA4ia63ibYeKeYNibgaSW21ia2X7wuxtSFMfQ4rVqRmIKYAcrKR535Bb4xwdibjrHv1Q/0?wx_fmt=png&quot;);background-size: 100%;background-repeat: no-repeat;margin-top: -1px;margin-bottom: -2px;transform: rotateZ(0deg);visibility: visible;"></svg>
  </p>