刷新网页后保留本地修改的方法及YouTube缩略图替换异常问题

一、替换缩略图后显示“图片未找到”的原因及解决办法 #

• 本地图片路径错误：直接用相对路径（比如./funny.jpg）浏览器无法识别，必须使用完整的本地文件协议路径，格式为file:///[你的图片绝对路径]，例如file:///C:/Users/John/Pictures/meme.jpg。
• 跨域资源限制：如果使用网络图片链接，部分网站设置了CORS规则禁止外部引用，导致图片加载失败。可以换用允许跨域的图片源，或者将图片下载到本地使用本地路径。
• 尺寸不匹配：YouTube缩略图有固定尺寸（常见1280x720、640x360），若替换的图片尺寸差异过大，可能出现显示异常或加载失败，尽量匹配原缩略图的尺寸。

二、刷新网页后保留本地修改的方法 #

最简便的方式是使用油猴脚本（Tampermonkey），编写自动替换脚本，每次加载YouTube页面时自动执行替换操作：

示例脚本 #

// ==UserScript==
// @name         YouTube 趣味缩略图替换
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  替换YouTube视频缩略图（仅本地生效）
// @author       You
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 替换缩略图的核心函数
    function swapThumbnails() {
        const allThumbnails = document.querySelectorAll('ytd-thumbnail img');
        allThumbnails.forEach(img => {
            // 替换为你的图片地址，本地用file://路径，或允许跨域的在线图片
            img.src = 'file:///C:/Your/Image/Path/your-funny-image.jpg';
            img.srcset = ''; // 清空srcset，避免浏览器加载原缩略图
        });
    }

    // 页面初始加载时执行替换
    swapThumbnails();

    // 监听页面动态内容加载（YouTube是单页应用，滚动/跳转后会加载新视频）
    const observer = new MutationObserver(swapThumbnails);
    observer.observe(document.body, { childList: true, subtree: true });
})();

使用步骤 #

1. 安装Tampermonkey浏览器扩展；
2. 新建用户脚本，粘贴上述代码；
3. 修改img.src为你的目标图片路径；
4. 保存后打开YouTube页面，缩略图会自动替换，刷新或跳转页面也会持续生效。

另外，也可以使用浏览器的本地覆盖功能（比如Chrome开发者工具→Sources→Overrides），将原缩略图的请求映射到本地图片，但设置流程繁琐，灵活性不如油猴脚本。

注意：所有修改仅在你的本地浏览器生效，不会影响YouTube服务器或其他用户，完全是本地端的趣味折腾。

内容的提问来源于stack exchange，提问作者Johnson