Cover images does not seems to work, or am I missing something?

[Deewens]

Hey,

So, I am trying to use the cover image feature. I store my images in "assets/images", but the image won't show up, and I do not understand why.
For my Profile image, I also store it inside assets/images, and when I use it as cover, it works. But anything else won't work.
If I use an image from the static directory, it works. You can see my different test in the front-matter.

I don't know if this is a bug of if I am just missing something, because afaik, I just did exactly the same as what is done in the exampleSite.

Also, I do not understand why it tries to get the image from /projects//images/** sometimes, and sometimes directly from /images/**

Front-matter:

---
title: "My 1st post"
draft: false
description: "Desc Text."
cover:
  #image: "/images/avatar.jpg" # Works (image in /assets/images/avatar.jpg)
  #image: "images/test2.jpg" # Works (image in /static/images/test2.jpg)
  image: "/images/test.jpg" # Don't work (image in /assets/images/test.jpg) 404 ERROR GET http://localhost:1313/images/test.jpg
  #image: "images/test.jpg" # Don't work (image in /assets/images/test.jpg) 404 ERROR GET http://localhost:1313/projects/alazia/images/test.jpg
  alt: "test" # alt text
  caption: "test" # display caption under cover
  relative: false # when using page bundles set this to true
  hidden: false # only hide on current single page
externalUrl: "https://adriendudon.me"
---

hugo.yaml:

baseURL: https://adriendudon.me/
title: Adrien Dudon
theme: ["PaperMod"]

params:
  defaultTheme: auto
  profileMode:
    enabled: true
    title: "Adrien Dudon" # optional default will be site title
    subtitle: "Game Programmer & Developer"
    imageUrl: "/images/avatar.jpg" # optional
    imageTitle: "Adrien Dudon's profile picture." # optional
    imageWidth: 240 # custom size
    imageHeight: 240 # custom size
    buttons:
      - name: See my Resume
        url: "resume/"

  socialIcons: # optional
    - name: "GitHub"
      url: "<link>"
    - name: "LinkedIn"
      url: "<link2>"

menu:
  main:
    - name: Home
      url: /
      weight: 1
    - name: Projects
      url: projects
      weight: 2
    - name: Resume
      url: resume/
      weight: 3
    - name: About
      url: about/

Directory structure:

├── archetypes
│   └── default.md
├── assets
│   └── images
│       ├── avatar.jpg
│       └── test.jpg
├── content
│   └── projects
│       └── alazia.md
├── data
├── hugo.yaml
├── i18n
├── layouts
│   └── projects
│       └── list.html
├── static
│   └── images
│       └── test2.jpg

[jtmusky]

So I have been banging my head around this too as this is my first time using this theme and hugo. Tried many ways to get this to work. Even going as far as using previous versions of hugo.

Anywho, after generating the site and inspecting the /public folder, I may of found the culprit. Hugo is surrounding the image location with non-ascii (unicode) escape sequences. i.e., %E2%80%9C/images/lazyboy.jpg%E2%80%9D. So, I tried it again without the double quotes in the front matter. That removed the unicode. Not sure if that is the correct way, or how it supposed to work. 🤷

The picture I referenced was in /static/images/lazyboy.jpg

cover:
  image: /images/lazyboy.jpg
  # image: "/images/lazyboy.jpg"
  hiddenInList: true

hugo and theme version that is working for me.
hugo v0.145.0+extended+withdeploy darwin/arm64 BuildDate=2025-02-26T15:41:25Z VendorInfo=brew
git submodule pinned to tag v8

[adityatelange]

check the exampleSite souce, we have used cover images in some posts.

[jtmusky]

check the exampleSite souce, we have used cover images in some posts.

Yep... (thank you) hindsight 20/20... I see it now in the examples. Didn't catch that url/imageName the first go around. Was chugging along with quoted values from the other yaml key/value pairs. *sigh, wish I saw it sooner.