关于Fluid图片不加载问题

这天在搞博客的个人主页，发现一些图片怎么放也加载不上去，并且一直显示在卷圈的图标。

并且这些图片有明显特点，都是外站的内容。

以前写博客也注意到了，之前想的是妥协一下，直接放在hexo内部来上传github加载。

后来整到个人的主页，想把看番列表也整进去，为了保证时效性，这就不得不加载外站的图片。不出所料，依旧是如以前加载不出来。
上网收拾类似答案，都是以前写博客时就尝试过的，依旧没有办法

这时我们观察前端：

能发现一个名叫 img-lazyload 的组件。这个名字就很让人怀疑，我们继续追看一下。

在前端源码里能看到

每一个图片属性都多了一个 lazyload 的东西，就此去询问Ai，最终确定了我环境上的答案

Fluid懒加载

原因

Hexo 的 Fluid 主题为了极致的加载速度，会对所有 img 标签进行“劫持”，把 src 替换成一张占位图（loading.gif）
当主题的懒加载脚本运行时，我们向外部请求的图片还没返回，懒加载脚本已经跑完了，这时就会一直显示着那个加载的占位图。

解决办法

我们可以在的图片样式里加入

data-no-lazy="1" class="no-lazyload"

就可以让这张图片不懒加载，

当然这解决不了markdown格式的插入问题，但我们若是不在意懒加载的性能可以直接在 Fluid 的 _config.yml 里关闭懒加载：

lazyload:
  enable: true

  # 加载时的占位图片
  # The placeholder image when loading
  loading_img: /img/loading.gif

或则在当前文章禁用懒加载：

---
title: 关于Fluid图片不加载问题
date: 2026-02-14 02:34
lazyload: false  # 添加这一行，关闭本页面的懒加载
---

图片反爬

当解决懒加载问题，我们又可能遇上里另一个机制：图片反爬

我选择的解决办法是用代理中转

这里放一个图片反爬问题的案例：

被b站反爬：

<img src="https://i1.hdslb.com/bfs/face/05a9e98489cb1c860705bba3c1e44cba36587033.jpg">

用图片代理中转解决：

<img src="https://images.weserv.nl/?url=https://i1.hdslb.com/bfs/face/05a9e98489cb1c860705bba3c1e44cba36587033.jpg">

总结

每个人博客环境不一样，请根据自己的具体情况参考

不想写在hexo里，Fluid上加载个网图真是费劲