首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >油猴脚本解决微信公众号文章图片无法直接显示

油猴脚本解决微信公众号文章图片无法直接显示

原创
作者头像
保持热爱奔赴山海
发布2026-04-04 09:50:56
发布2026-04-04 09:50:56
1850
举报
文章被收录于专栏:DevOpsDevOps

最近在使用 obsidian 剪藏微信公众号的内容的时候,发现有些图片丢失了。这是因为懒加载导致的。

微信文章中的图片通常采用懒加载技术,即图片的 src属性初始是一个占位符,真正的图片地址藏在 data-src属性中。如果 Web Clipper 抓取时没有触发图片加载,它就会抓到无效的占位符。

操作步骤:在点击剪藏按钮前,手动将文章页面滚动到最底部,确保所有图片都已完成加载(即从 data-src替换到了 src)。此时再进行剪藏,成功率会大幅提升。

还有个更好的方法,就是使用油猴脚本,下面是我自定义的油猴脚本,代码如下:

代码语言:txt
复制
// ==UserScript==
// @name         微信文章自动加载图片
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动将微信文章的 data-src 转为 src,方便剪藏
// @author       You
// @match        *://mp.weixin.qq.com/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // 监听DOM变化,确保动态内容也能被处理
    const observer = new MutationObserver(() => {
        document.querySelectorAll('img[data-src]').forEach(img => {
            img.src = img.dataset.src;
        });
    });
    observer.observe(document.body, { childList: true, subtree: true });
    // 初始执行一次
    document.querySelectorAll('img[data-src]').forEach(img => {
        img.src = img.dataset.src;
    });
})();

此后打开任何公众号文章,图片会自动加载,无需任何手动操作,直接剪藏即可。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档