求助:微信公众号文章中的图片时无法通过obsidian web clipper正确导入


遇到的问题

微信公众号文章中的图片时无法通过obsidian web clipper正确导入。如下图中的两个链接,有些图片可以正常解析成图床链接,有的不行。
image

无法正确解析在笔记中表现为裂开的图片,因为新用户的限制我只能发一张附件,所以无法直接发在帖子中:D

不能解析成正常链接的图片是随机的,测试链接:https://mp.weixin.qq.com/s/faGoJeC9CjsXYfJ9oSvbTQ

Obsidian版本:v1.8.10
Obsidian Web Clipper版本:0.11.8
环境:Windows 10 专业版 22h2 19045.5854

预期的效果

我的需求是将整篇微信文章的文字内容和图片都剪藏到本地,并在笔记中正常显示。
原先的方案是使用Obsidian Web Clipper + Local Image Plus,在浏览器点两下就能将文字和图片存到本地。
但因为图链时不时解析失败,导致剪藏完还要手动去复制图片,比较麻烦。

已尝试的解决方案

1.更换工具
尝试了Web Clipper,不知道是知识库名称的原因还是别的原因,笔记无法正确生成。
另外还下载了毛线剪藏,但还没有尝试,因为我更希望用原生的Obsidian Web Clipper。

2.手动保存解析失败的图片
如上文所说,比较麻烦:D

忘记在主楼中标注了,截图图片9是正常的链接,截图图片10是错误的链接

最大可能原因是公众号页面的图片懒加载

例如刚进页面时, 靠后的某个图是这样子的:

<section style="text-align: center;" nodeleaf="">
<img alt="Icon image" class="rich_pages wxw-img js_img_placeholder wx_img_placeholder" data-imgfileid="100008906" data-ratio="1" 
     data-src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/onTVkRiaRDQIqXbuofyhyCoWLlUeDgXmcOQibFqIc8cQTnHU3Vxibp2atojib2xNNNlFNxxeLHw1yFnsfiamGp4XvHQ/640?wx_fmt=other&amp;from=appmsg" data-type="other" data-w="240" style="width: 164px !important; height: 164px !important;" data-original-style="width:164px;height:164px;" data-index="23" 
     src="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='1px' height='1px' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3E%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0'%3E%3Cg transform='translate(-249.000000, -126.000000)' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E" 
     _width="164px">
</section>

可见 data-src 才是真实 url ; 而 src 只是个占位符 (其占位符内容也符合 “截图图片10是错误的链接”)

当用户实际浏览到该图片位置时, 这个 src 才被替换为 data-src 里的真实值

而各种 Web Clipper 要是没做处理, 可能一上来就把无效的 src 抓走, 就是楼主所描述的场景


1 简单情况下, 把网页从上到下完整浏览一遍, 让图片都刷出来, 再 Obsidian Web Clipper 就能基本解决问题, 这办法是最省心的

2 各家国内的剪藏器, 可能对几大主流网站做特殊处理, 也能较好的应对这些细节

3 再不行就得写脚本把 data-src 给替换过去了, 一般是不至于搞的这么麻烦

感谢解答,我今天也发现了,只要将页面拉到最下面就能够全部剪藏下来。
再次感谢您花时间回复且解释清楚机制!:bowing_man:

1 个赞