The page cannot fetch images from assets/images

Issue description

I added a blogroll page to my site today, but when referencing images from assets/images, only the first image loads. The other images fail to load even though the image files actually exist and the paths appear to be correct. I’m not sure how to fix this and would appreciate any help. Thank you very much!

Here are the steps I took to add the blogroll page:

  1. Added the file layouts\_default\friend-link.html
  2. Added the CSS file assets\css\extended\road-sign.css
  3. Added image resources under the path assets\images: flink-sample1.webp, flink-sample2.webp, …
  4. Added the file content\friend-link.md

content\friend-link.md

---
title: "Links"
draft: false
ShowReadingTime: false
showToc: false
TocOpen: true
comments: false
enableCopyright: false
enableDonate: false
layout: "friend-link"
links:
  [
    {
      "name": "Donghai",
      "url": "/",
      "avatar": "/images/flink-sample1.webp",
      "bio": "Sincerely documented, life is worth it.",
      "urlname": "mgrowup.com",
    },
    {
      "name": "Linus",
      "url": "/",
      "avatar": "/images/flink-sample2.webp",
      "bio": "Creator of Linux kernel and Git.",
    },
    {
      "name": "Grace",
      "url": "/",
      "avatar": "/images/flink-sample3.webp",
      "bio": "Computer pioneer, US Navy rear...",
    },
    {
      "name": "Tim",
      "url": "/",
      "avatar": "/images/flink-sample4.webp",
      "bio": "Inventor of the World Wide Web.",
    },
    {
      "name": "Guido",
      "url": "/",
      "avatar": "/images/flink-sample5.webp",
      "bio": "Creator of the Python programming language.",
    }
  ]
---

Friends who have had friendly interactions with me three times or more on any platform are welcome to add my blog to your blogroll. Just reach out to me in your preferred way.

Github repository address

https://github.com/rickeygong/hugo-papermod-cus

Environment Information

  1. Browser:Edge | Version 139.0.3405.102 (Official Build) (64-bit)
  2. Hugo
PS C:\Users\> hugo env
hugo v0.147.9-29bdbde19c288d190e889294a862103c6efb70bf+extended+withdeploy windows/amd64 BuildDate=2025-06-23T08:22:20Z VendorInfo=gohugoio
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.24.0"
github.com/sass/libsass="3.6.6"
github.com/webmproject/libwebp="v1.3.2"

Hugo only publishes assets if you call .RelPermalink (or some friends - see Hugo Pipes ) - which you don’t. Try moving the images to /static/images instead and leave the rest unchanged.

1 Like

Solution (1)
Move the images from assets/images/ to static/images/.

Solution (2)
I must use assets/, so I can only change how the HTML fetches the images.

In the friend-link.html file, change:

<img src="{{ .avatar }}" class="friend-avatar" loading="lazy" alt="Avatar">

to:

{{ $path := replace .avatar "/images/" "" }}
{{ $img := resources.Get (printf "images/%s" $path) }}
<img src="{{ $img.Permalink }}" class="friend-avatar" loading="lazy" alt="{{ .name }}">

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.