Hugo内容文件插入图片遇阻：relref等方法失效，求可行方案

为什么relref无法插入图片 #

relref短代码仅用于解析页面内容文件（如Markdown、HTML）的引用，不支持媒体资源，直接用它引用图片会触发"找不到页面"的错误。

推荐的三种正确方式 #

1. 页面资源方式（推荐，适配多环境）

将图片和当前内容文件放在同一目录下（比如content/posts/my-post/myimage.png），Hugo会将其识别为该页面的资源，自动处理路径：

• 使用内置figure短代码：

{{< figure src="myimage.png" alt="替代文本" title="图片标题" >}}

• 或者直接通过资源引用生成Markdown图片语法：

{{ with .Resources.GetMatch "myimage.png" }}
  ![替代文本]({{ .RelPermalink }} "图片标题")
{{ end }}

这种方式会自动适配配置的baseURL，完全不用担心不同部署环境的路径问题。

2. Static目录结合relURL短代码

若图片放在static目录下（比如static/images/myimage.png），用relURL生成适配baseURL的路径：

![替代文本]({{< relURL "images/myimage.png" >}} "图片标题")

relURL会根据站点配置自动拼接正确的前缀，避免手动写死路径导致的链接失效。

3. 全局资源引用

如果图片是全站通用的，可将其放入assets目录，通过resources.Get获取：

{{ with resources.Get "images/myimage.png" }}
  ![替代文本]({{ .RelPermalink }} "图片标题")
{{ end }}

这种方式还能结合Hugo的图片处理功能（如压缩、裁剪），直接在内容文件中生成优化后的图片链接。

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