Hugo循环中图片Resize不生效问题求助

可能的问题点及解决办法： #

• 图片资源路径不匹配resources.Get的要求
  resources.Get只能读取项目assets目录下的本地资源，如果你的.Params.cover是外部URL、static目录下的绝对路径（比如/covers/xxx.jpg），或者路径写错了，resources.Get获取到的资源对象其实是无效的——Hugo不会报错，但后续的Resize操作等于没执行，最终输出的还是原图片路径。
  解决：把本地图片移到assets目录下，路径改用相对格式（比如covers/xxx.jpg）；如果是外部图片，替换成resources.GetRemote来获取资源再做Resize。

• Hugo资源缓存未清理
  Hugo会缓存处理过的资源文件，如果你之前没启用图片处理，修改代码后缓存里还是旧的原尺寸图片，导致新处理的图片没被加载。
  解决：删除项目根目录下的resources文件夹，然后重新运行hugo server或hugo build，强制重新生成处理后的图片资源。

• 未显式输出处理后图片的URL
  直接输出Resize后的资源对象，虽然大部分情况会自动调用RelPermalink，但偶尔可能因为上下文问题输出异常。显式指定输出URL更稳妥。
  解决：把代码里的{{ $image.Resize "500x" }}改成{{ $image.Resize "500x" | relURL }}或者{{ with $image.Resize "500x" }}{{ .RelPermalink }}{{ end }}。

修正后的完整代码示例： #

{{ range sort (where .Site.Pages ".Params.layout" "playlist") ".Params.sort" }}
    {{ $coverPath := .Params.cover }}
    {{ $image := resources.Get $coverPath }}
    {{ $resizedImage := $image.Resize "500x" }}
    <div class="w-full max-w-sm bg-gray-900 hover:bg-brand border border-gray-900 rounded-lg shadow">
        <a href="{{ .Params.permalink }}">
            <img class="rounded-t-lg" src='{{ $resizedImage.RelPermalink }}' alt="{{ .Title }}" />
        </a>
        <div class="px-5 mt-4 pb-5 text-center">
             <span class="text-lg mt-8 text-gray-200">{{ .Params.description }}</span>  
        </div>
    </div>
{{ end }}

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