Images not displayed when browsing site from local file system (no web server)

Hello,

When deploying my site to a local server, the images are being shown.
I have placed the images in the static folder.

However, when I use the hugo command to build a site, I checked the generated html pages, and they aren’t being shown.

How are you referencing them exactly?

<img src="/icons/example.png"> would map to static/icons/example.png.

Though you might want to consider bundling images alongside posts like https://gohugo.io/content-management/page-resources/ in future…

In the markdown files, I referenced them as “/image1.jpg”. They appear when deployed locally.
The generated HTML files do not show any images since the images are in a different folder.
After changing the img element’s src into a different path, the images show.

Sidenote: I’ve been very confused before by accidentally copying images into the public/ folder. Don’t get muddled like I did. :wink:

May I know exactly what I should do? And how it can be done? The docs don’t have examples

I don’t quite understand how your store your file and what your content looks like. Do you have a minimal example I could peer at?

Here:
https://drive.google.com/drive/folders/13Xqr3J2N9VD6h2mmuybs1b4mlERmhv5w?usp=sharing

If you are “checking” the generated pages by opening them from your file explorer, the images will not appear because the image path is relative to the site root, not the page.

To “check” the generated pages in the public directory, you need to serve the pages with a web server.

How can I show the images in a "hugo’ command generated HTML site (by which I mean the “public” folder)?

See my previous response. You need to serve the public directory with a web server.

I found the solution here:

I needed to set the “relative paths” attribute in the site’s config site

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