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

**URL:** <https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655>\
**Category:** support\
**Created:** [August 18, 2020, 5:54am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655 "2020-08-18T05:54:25Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![zxa4fd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zxa4fd/32/12168_2.png) [@zxa4fd](https://discourse.gohugo.io/u/zxa4fd)\
**Post date:** [August 18, 2020, 5:54am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/1 "2020-08-18T05:54:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hendry](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hendry/32/7037_2.png) [@hendry](https://discourse.gohugo.io/u/hendry)\
**Post date:** [August 18, 2020, 6:25am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/2 "2020-08-18T06:25:28Z")

</div>

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/](https://gohugo.io/content-management/page-resources/) in future…

---

<div class="post-metadata">

**Author:** ![zxa4fd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zxa4fd/32/12168_2.png) [@zxa4fd](https://discourse.gohugo.io/u/zxa4fd)\
**Post date:** [August 18, 2020, 6:51am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/3 "2020-08-18T06:51:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hendry](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hendry/32/7037_2.png) [@hendry](https://discourse.gohugo.io/u/hendry)\
**Post date:** [August 18, 2020, 6:58am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/4 "2020-08-18T06:58:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zxa4fd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zxa4fd/32/12168_2.png) [@zxa4fd](https://discourse.gohugo.io/u/zxa4fd)\
**Post date:** [August 18, 2020, 8:10am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/5 "2020-08-18T08:10:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hendry](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hendry/32/7037_2.png) [@hendry](https://discourse.gohugo.io/u/hendry)\
**Post date:** [August 18, 2020, 8:31am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/6 "2020-08-18T08:31:04Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![zxa4fd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zxa4fd/32/12168_2.png) [@zxa4fd](https://discourse.gohugo.io/u/zxa4fd)\
**Post date:** [August 18, 2020, 8:47am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/7 "2020-08-18T08:47:00Z")

</div>

Here:  
[https://drive.google.com/drive/folders/13Xqr3J2N9VD6h2mmuybs1b4mlERmhv5w?usp=sharing](https://drive.google.com/drive/folders/13Xqr3J2N9VD6h2mmuybs1b4mlERmhv5w?usp=sharing)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [August 18, 2020, 9:38am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/8 "2020-08-18T09:38:45Z")

</div>

> [@zxa4fd](#):
>
> I check the generated html pages, and they [images] aren’t being shown.

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.

> <https://superuser.com/questions/543744/can-static-websites-be-viewed-without-a-server/1008453#1008453>

---

<div class="post-metadata">

**Author:** ![zxa4fd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zxa4fd/32/12168_2.png) [@zxa4fd](https://discourse.gohugo.io/u/zxa4fd)\
**Post date:** [August 18, 2020, 9:47am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/9 "2020-08-18T09:47:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [August 18, 2020, 9:49am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/10 "2020-08-18T09:49:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zxa4fd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zxa4fd/32/12168_2.png) [@zxa4fd](https://discourse.gohugo.io/u/zxa4fd)\
**Post date:** [August 18, 2020, 10:03am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/11 "2020-08-18T10:03:54Z")

</div>

I found the solution here:

> <https://github.com/matcornic/hugo-theme-learn/issues/125>
>
> Hi,
> I'm using this theme to build an a11y guideline, and I really like this theme.
> Everything is fine when I do "hugo...

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

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [August 20, 2020, 10:03am UTC](https://discourse.gohugo.io/t/images-not-displayed-when-browsing-site-from-local-file-system-no-web-server/27655/12 "2020-08-20T10:03:57Z")

</div>

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