Hugo中如何使用JSON文件内存储的路径正确渲染图片

问题根因 #

• 存放在assets目录下的资源为Hugo托管资产，默认不会直接复制到站点发布目录，直接写相对路径无法被Hugo识别解析，导致最终输出路径为空
• 模板中img标签的属性值未用引号包裹，也会提升渲染异常的概率

解决步骤 #

1. 修改partials/card.html代码，使用Hugo内置资源函数获取图片公开路径

{{/* 直接读取data目录下的JSON数据，无需调用getJSON，性能更优 */}}
{{ range .Site.Data.products }}
  <header>
    <h2>{{ .Name }}</h2>
  </header>
  {{/* 从assets目录读取对应图片资源 */}}
  {{ $imgResource := resources.Get .Imgsrc }}
  <img src="{{ $imgResource.RelPermalink }}" alt="{{ .Name }}" />
{{ end }}

2. 重启Hugo本地服务，重新构建后即可看到img标签的src属性会输出正确的资源相对路径，图片可以正常加载。

可选优化 #

如果需要对图片进行压缩、格式转换等处理，可以在获取资源后增加处理逻辑，比如将图片转为WebP格式：

{{ $imgResource = $imgResource.Resize "400x webp q80" }}

内容的提问来源于stack exchange，提问作者Erol J.