# Displaying images

**URL:** <https://discourse.gohugo.io/t/displaying-images/30448>\
**Category:** support\
**Created:** [January 6, 2021, 11:07am UTC](https://discourse.gohugo.io/t/displaying-images/30448 "2021-01-06T11:07:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jubalh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jubalh/32/13216_2.png) [@jubalh](https://discourse.gohugo.io/u/jubalh)\
**Post date:** [January 6, 2021, 11:07am UTC](https://discourse.gohugo.io/t/displaying-images/30448/1 "2021-01-06T11:07:02Z")

</div>

First of all: I’m not allowed to put links in here. So I have to change them…

I updated to latest hugo (I was many versions behind) today.  
Then realized that my pictures are not displayed.

I used to have them in the `/static` directory.  
Then went on to read:

- hugo docu: introduction/#from-file-to-resource
- hugo docu: content-management/image-processing/
- [alexlakatos.com/web/2020/07/17/hugo-image-processing/](http://alexlakatos.com/web/2020/07/17/hugo-image-processing/)

So I moved `/static/images` to `assets/images`.

In my `content/post/test.md` I tried the following:

```auto
{{ $lxqtscr := resources.Get "images/screenshot.png" }}
{{ $lxqtscr.Permalink }}
<img src="{{ $lxqtscr.Permalink }}" alt="screenshot" style="width: 734px;"/>

```

This resulted int he first two lines just printed into the html page, and the image tag isn’t even present.  
I’m using the contrast theme.

---

<div class="post-metadata">

**Author:** ![Hrishikesh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hrishikesh/32/19176_2.png) [@Hrishikesh](https://discourse.gohugo.io/u/Hrishikesh)\
**Post date:** [January 6, 2021, 12:52pm UTC](https://discourse.gohugo.io/t/displaying-images/30448/2 "2021-01-06T12:52:55Z")

</div>

Displaying images is fairly straightforward. Use Markdown.

`![](path-to-img.jpg)`. Then, it won’t matter if you have your images in `static` or `assets`. If you don’t want to process images using Hugo, you can let them exist in `static`.

So, if your image exists at: `/static/images/img1.jpg`, you can add it in your content file like this: `![Alternate Text](/images/img1.jpg)`.

However, if you want to mention the width and height of image like you’ve done in your code, you’d have to keep the images in `assets` or in the `content` folder. I’d choose the latter.

Here’s how I do it:

My file structure is, `/content/section/post1/`. Here, I have my `index.md` and `img1.jpg`. Then, in the `index.md`, I can add the image as `![Alternate Text](./img1.jpg)`. However, to specify the size, you’d have to create the following file (one-time):

`/layouts/_default/_markdown/render-image.html` with the content:

```auto
{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
<img width = "{{- $image.Width -}}" height = "{{- $image.Height -}}" alt = "{{- .PlainText | htmlUnescape -}}" src = "{{- $image.RelPermalink -}}">

```

---

<div class="post-metadata">

**Author:** ![jubalh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jubalh/32/13216_2.png) [@jubalh](https://discourse.gohugo.io/u/jubalh)\
**Post date:** [January 6, 2021, 2:50pm UTC](https://discourse.gohugo.io/t/displaying-images/30448/3 "2021-01-06T14:50:28Z")

</div>

Why do I need the last part only one time, and shouldn’t there be the filename of the image somwhere in there?

---

<div class="post-metadata">

**Author:** ![Hrishikesh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hrishikesh/32/19176_2.png) [@Hrishikesh](https://discourse.gohugo.io/u/Hrishikesh)\
**Post date:** [January 6, 2021, 2:58pm UTC](https://discourse.gohugo.io/t/displaying-images/30448/4 "2021-01-06T14:58:38Z")

</div>

> [@jubalh](#):
>
> Why do I need the last part only one time

It’s because of Render Hooks. Basically, you’re telling Hugo how to render the HTML content of the Markdown Image syntax. So once it’s created, all the images in Markdown written in the Markdown syntax will render with the code in that file. Read more here: [Configure markup | Hugo](https://gohugo.io/getting-started/configuration-markup/#render-hook-templates)

> [@jubalh](#):
>
> and shouldn’t there be the filename of the image somwhere in there?

It is mentioned in the part `(printf "%s" (.Destination | safeURL))`. When you’d add the image in Markdown using `![Alternate Text](./img1.jpg)`, the path `./img1.jpg` works as the destination and is passed to the `render-image` template.

---

<div class="post-metadata">

**Author:** ![dnorman](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dnorman/32/20571_2.png) [@dnorman](https://discourse.gohugo.io/u/dnorman)\
**Post date:** [January 7, 2021, 7:13pm UTC](https://discourse.gohugo.io/t/displaying-images/30448/5 "2021-01-07T19:13:12Z")

</div>

I put my images in /static/images/… (which get published into /images/… ) and just use plain markdown to add them to posts. I think the /assets/images directory is for images that need to be processed by Hugo? I pre-process all images outside of Hugo, and just put the web-ready files in /static/images/…

---

<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:** [February 1, 2022, 6:12am UTC](https://discourse.gohugo.io/t/displaying-images/30448/6 "2022-02-01T06:12:05Z")

</div>

Split this topic on February 1, 2022, 6:12am UTC

A post was split to a new topic: [Pass attributes to image render hook](https://discourse.gohugo.io/t/pass-attributes-to-image-render-hook/36899)

---

<div class="post-metadata">

**Author:** ![dogweather](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dogweather/32/18817_2.png) [@dogweather](https://discourse.gohugo.io/u/dogweather)\
**Post date:** [February 18, 2023, 12:41am UTC](https://discourse.gohugo.io/t/displaying-images/30448/7 "2023-02-18T00:41:23Z")

</div>

Thanks! I found this very difficult because the docs show `{{...}}` embedded somewhere, and I inferred I could simply use it as shown in the `.md` content.