如何用HTML/CSS/JS替换重定向失效图片与缺失视频为可搜索文本

一、处理Imgur这类重定向失效的图片 #

部分图床会将失效图片重定向到官方占位图，导致原alt文本无法被搜索识别，我们可以通过检测图片实际加载的URL，手动添加可搜索的错误文本。

1. 给目标图片加统一标识类 #

先给所有需要检测的图片加上自定义类check-failed-img，方便后续JS定位：

<img src="https://i.imgur.com/missing.jpg" alt="*ERROR*" class="check-failed-img">

2. 编写JS检测与替换逻辑 #

页面加载完成后，对比图片的原始URL和实际加载的URL（重定向后会变成占位图地址），若不一致则添加可搜索的错误文本：

// 等页面所有资源加载完成后执行
window.addEventListener('load', function() {
  // 获取所有标记了检测类的图片
  const targetImgs = document.querySelectorAll('.check-failed-img');
  
  // 遍历每一张图片
  targetImgs.forEach(img => {
    // 获取图片的原始地址（设置的src属性）和实际加载的地址
    const originalSrc = img.getAttribute('src');
    const actualSrc = img.src;
    
    // 判断是否被重定向：要么地址不一致，要么包含Imgur占位图特征
    const isFailed = actualSrc !== originalSrc || actualSrc.includes('removed.png');
    
    if (isFailed) {
      // 创建一个可搜索的错误文本元素
      const errorSpan = document.createElement('span');
      errorSpan.textContent = '*ERROR*';
      // 给文本加样式类，方便后续用CSS美化
      errorSpan.classList.add('error-badge');
      
      // 把图片设为相对定位，让文本能叠加在上面
      img.style.position = 'relative';
      // 将文本插入到图片的父元素里，放在图片后面（实现覆盖效果）
      img.parentNode.insertBefore(errorSpan, img.nextSibling);
      
      // 如果想直接替换图片而不是叠加，就用下面这行替换上面的insertBefore
      // img.parentNode.replaceChild(errorSpan, img);
    }
  });
});

3. 添加CSS让错误文本醒目 #

用CSS设置错误文本的样式，确保它显眼且能覆盖在图片上：

.error-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.8);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

二、处理加载失败的视频 #

视频加载失败时会显示浏览器默认占位，我们可以监听视频的错误事件，添加可搜索的错误文本。

1. 给视频标签加统一标识类 #

给需要检测的视频加上check-failed-video类：

<video class="check-failed-video" controls>
  <source src="https://path-to-video.mp4" type="video/mp4">
</video>

2. 编写JS监听视频错误事件 #

视频加载失败时会触发error事件，我们监听这个事件来添加错误文本：

window.addEventListener('load', function() {
  const targetVideos = document.querySelectorAll('.check-failed-video');
  
  targetVideos.forEach(video => {
    // 监听视频的错误事件
    video.addEventListener('error', function() {
      const errorSpan = document.createElement('span');
      errorSpan.textContent = '*ERROR*';
      errorSpan.classList.add('error-badge');
      
      video.style.position = 'relative';
      video.parentNode.insertBefore(errorSpan, video.nextSibling);
      
      // 替换视频的写法：
      // video.parentNode.replaceChild(errorSpan, video);
    });
    
    // 手动触发一次检测，防止页面加载完成后事件没触发
    if (video.error) {
      video.dispatchEvent(new Event('error'));
    }
  });
});

补充说明 #

• 叠加和替换二选一：叠加模式保留原图片/视频的占位，错误文本覆盖在上面；替换模式直接把失效元素换成错误文本，两种方式都能让*ERROR*被浏览器搜索到。
• 适配其他图床：如果是其他会重定向的图床，只需要修改JS里的isFailed判断条件，比如识别该站点的占位图URL特征即可。
• 样式自定义：可以根据需求调整CSS的颜色、字体、透明度等，让错误文本更符合页面风格。

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