如何在Hugo首页添加图片？现有配置报错求解决方案

问题背景 #

我尝试在Hugo首页的_index.md文件中展示图片，已添加![flutter image](/images/home_flutter.png)标记，图片存放于assets/images目录。同时在baseof.html中加入{{ $image := resources.Get "images/home_flutter.png" }}代码。当前logo.svg通过resources.GetMatch结合resources.ExecuteAsTemplate可正常加载，但将该方法用于home_flutter.png时出现错误：

Error: error building site: EXECUTE-AS-TEMPLATE: failed to transform "images/photo.png" (image/png): failed to parse Resource "images/home_flutter.png" as Template:: template: images/home_flutter.png:177: unrecognized character in action: U+FFFD '�'

错误原因及解决方法 #

• 错误根源：resources.ExecuteAsTemplate是用来解析Hugo文本类模板文件的（比如.html、.svg），PNG属于二进制图片文件，模板解析器会误将其当作模板文件解析，二进制内容里的特殊字符直接触发了解析错误。
• 解决步骤：
  1. 彻底移除对PNG图片使用的resources.ExecuteAsTemplate方法，直接用resources.Get或resources.GetMatch获取图片资源即可。
  2. 如果需要对图片进行压缩、格式转换等处理，改用Hugo的image.Process方法，示例代码：

     {{ $image := resources.Get "images/home_flutter.png" | image.Process "webp q80" }}
     <img src="{{ $image.RelPermalink }}" alt="flutter image">
     

  3. 首页_index.md中的Markdown图片标记可保留，若路径映射失效，也可在模板中通过资源变量输出图片链接，替代Markdown标记。

baseof.html代码位置说明 #

• 你添加的{{ $image := resources.Get "images/home_flutter.png" }}代码位置是否正确，核心看变量的使用场景：
  • 若要全局供子模板调用，放在baseof.html的<head>之后、<body>内容之前的位置即可，确保变量在使用它的模板代码前被定义。
  • 若仅首页需要该图片，更建议把这段代码放在首页专属模板（比如layouts/index.html）中，避免全局模板冗余。

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