问题

在Obsidian中管理Hugo博客图片时，图床不稳定，不选择图床的话，插入图片困难，且不便于维护，常遇到以下问题：

  1. 路径混乱：需手动维护/static/images目录结构
  2. 多语言适配：中英文路径需要重复配置
  3. 开发体验差：本地调试、操作文件时频繁出现404错误

效果展示

直接渲染的话，会因为路径不对，报错如下：

1

GET http://192.168.3.29:1313/en/static/images/diary/two-ways.png 404 (Not Found)

应用脚本后，图片路径被修正并重新请求

1

Replaced: http://192.168.3.29:1313/en/static/images/diary/two-ways.png -> http://192.168.3.29:1313/images/diary/two-ways.png

即可正常渲染图片。

方法

这里仅提供思路参考，任何人均能简单的实现，如需源代码直接评论索取就行。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// instead_images.js
const IMAGE_REWRITER_CONFIG = {
  pathPatterns: [
    {
      test: /(\/zh|\/en)\/static\/images\/(.*)/,
      replace: '/images/$2'
    }
  ],
  debug: true
};

function rewriteImageSource(src) {
  // 实现智能路径转换
  // [核心逻辑代码...]
}

// 劫持原生图片创建方法
document.createElement = function(tagName) {
  // [图片对象劫持代码...]
}

// 动态内容处理
new MutationObserver(() => {
  // [自动处理新增图片代码...]
});

配置

配置hugo

在config.yaml 中设置

1
2

params:
  InsteadPicture: true

然后只需要在 head 中引入

1
2
3

{{- if .Site.Params.InsteadPicture -}}
<script src="{{ "/js/instead_images.js" | relURL }}"></script>
{{- end -}}

配置好Obsidian 后，即可成功生效。

配置obsidian

  1. 文件引用设置格式为相对路径模式；
  2. 设置好图片存放目录，可根据自己需求修改，比如我的为 static\images\
  3. 不用担心文件变更，使用Obsidian 操作文件移动会自行更行链接。

方案优势

  1. 零图床依赖：所有图片本地化管理，不需要做任何文件操作
  2. 开发友好：实时重载不影响写作流
  3. SEO优化：保持静态资源路径一致性
  4. 多平台兼容：完美适配Hugo/Hexo等静态生成器
  5. 便于整理： 移动文件路径可依赖Obsidian 自动更新链接