# Image path

**URL:** <https://discourse.gohugo.io/t/image-path/1721>\
**Category:** support\
**Created:** [September 15, 2015, 9:52am UTC](https://discourse.gohugo.io/t/image-path/1721 "2015-09-15T09:52:33Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![casa](https://avatars.discourse-cdn.com/v4/letter/c/45deac/32.png) [@casa](https://discourse.gohugo.io/u/casa)\
**Post date:** [September 15, 2015, 9:52am UTC](https://discourse.gohugo.io/t/image-path/1721/1 "2015-09-15T09:52:33Z")

</div>

Hi all,

I have a markdown document with an image such as:

```
![This is an image](image.png)

```

Where can I tell hugo that images live in directory _static/img_ and that they will be in directory _img_ of the resulting website? I searched documentation and forum for this information but found it nowhere.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [September 15, 2015, 10:08am UTC](https://discourse.gohugo.io/t/image-path/1721/2 "2015-09-15T10:08:26Z")

</div>

You don’t tell Hugo that; this is how it works by default.

You can put images in both /static and /content (the last is useful if you want to keep content (md) and media files together).

---

<div class="post-metadata">

**Author:** ![stiobhart](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stiobhart/32/161_2.png) [@stiobhart](https://discourse.gohugo.io/u/stiobhart)\
**Post date:** [September 16, 2015, 2:35pm UTC](https://discourse.gohugo.io/t/image-path/1721/3 "2015-09-16T14:35:51Z")

</div>

If you’re using an `img` sub-directory within the `static` directory, just include it in your markdown image tag:

`![This is an image](/img/image.png)`

Anything in `static` gets converted to a sub-directory of the baseURL on building the site. So the image will end up at `somedomain.net/img/image.png`

---

<div class="post-metadata">

**Author:** ![casa](https://avatars.discourse-cdn.com/v4/letter/c/45deac/32.png) [@casa](https://discourse.gohugo.io/u/casa)\
**Post date:** [September 16, 2015, 3:24pm UTC](https://discourse.gohugo.io/t/image-path/1721/4 "2015-09-16T15:24:46Z")

</div>

Thanks for your answers. I put images in the same directory than the article and everything is fine (it even works in Github’s preview which is cool).

---

<div class="post-metadata">

**Author:** ![casa](https://avatars.discourse-cdn.com/v4/letter/c/45deac/32.png) [@casa](https://discourse.gohugo.io/u/casa)\
**Post date:** [September 24, 2015, 12:12pm UTC](https://discourse.gohugo.io/t/image-path/1721/5 "2015-09-24T12:12:37Z")

</div>

Nevertheless, putting images in the article directory is not a good solution because when you render article in the article list, image src won’t be correct. I think that there should be an option to indicate where is the image directory.

---

<div class="post-metadata">

**Author:** ![stiobhart](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stiobhart/32/161_2.png) [@stiobhart](https://discourse.gohugo.io/u/stiobhart)\
**Post date:** [September 26, 2015, 1:03pm UTC](https://discourse.gohugo.io/t/image-path/1721/6 "2015-09-26T13:03:10Z")

</div>

@casa: I think that there should be an option to indicate where is the image directory

I’m sure you could do that by editing your _img.html_ [and _figure.html_] in `/layouts/shortcodes/` to hard-wire the path to wherever you wanted to keep your images into the `src="..."` part of the HTML they generate.

But it seems a bit a bit of a palaver to me, when you can just add your image directory under `/static/` and then reference that easily enough as `/name-of-imagedir/` in your image tags [as I outlined above].

---

<div class="post-metadata">

**Author:** ![SvenDowideit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/svendowideit/32/670_2.png) [@SvenDowideit](https://discourse.gohugo.io/u/SvenDowideit)\
**Post date:** [September 27, 2015, 1:03am UTC](https://discourse.gohugo.io/t/image-path/1721/7 "2015-09-27T01:03:41Z")

</div>

I’m working on adding a github (and probably bitbucket) compatible mode, and this will need to manage to figure out relative linking for images and also ‘get it right’ for the article list case that @casa mentions.

see [https://github.com/spf13/hugo/pull/1398](https://github.com/spf13/hugo/pull/1398)

its a work in progress - I’m in the middle of a stack of new things right now, so progress is lumpy 🙂

---

<div class="post-metadata">

**Author:** ![casa](https://avatars.discourse-cdn.com/v4/letter/c/45deac/32.png) [@casa](https://discourse.gohugo.io/u/casa)\
**Post date:** [September 28, 2015, 1:13pm UTC](https://discourse.gohugo.io/t/image-path/1721/8 "2015-09-28T13:13:55Z")

</div>

I’m afraid that implementing this solution result in documents that are not markdown anymore. What if I want to generate PDF or ePub from my articles? This is not just hypothetical, this is what I do with each article on my website, at [http://sweetohm.net](http://sweetohm.net). Project for this site is at [http://github.com/c4s4/sweetohm](http://github.com/c4s4/sweetohm).

---

<div class="post-metadata">

**Author:** ![SvenDowideit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/svendowideit/32/670_2.png) [@SvenDowideit](https://discourse.gohugo.io/u/SvenDowideit)\
**Post date:** [September 29, 2015, 12:31am UTC](https://discourse.gohugo.io/t/image-path/1721/9 "2015-09-29T00:31:49Z")

</div>

Can you explain what you mean by ‘not markdown’? My focus is to enable hugo to be compatible with the markdown used in GitHub - as our devs and users seem to read both the hugo site, and the GitHub version of the same documents.

And so to me, having Hugo able to deal with GitHub markdown paths is improving its markdown compatibility.

---

<div class="post-metadata">

**Author:** ![casa](https://avatars.discourse-cdn.com/v4/letter/c/45deac/32.png) [@casa](https://discourse.gohugo.io/u/casa)\
**Post date:** [September 29, 2015, 11:25am UTC](https://discourse.gohugo.io/t/image-path/1721/10 "2015-09-29T11:25:32Z")

</div>

Sorry, I was not replying to your post but to the previous one that suggested to use shortcodes, which are not makdown.

Regarding your post, I totally agree that there should be a compatibility with github links. Nevertheless, I think that the issue is more general : a markdown document should not define image paths because they depend on the rendering context. Image paths in github and website or while rendering PDF for instance will be different.

Thus I think that there should be a way to tell Hugo the path for images and it would set it correctly for various document locations.

I have fixed this issue using pandoc with a filter that sets the path of the image while processing.

---

<div class="post-metadata">

**Author:** ![ashander](https://avatars.discourse-cdn.com/v4/letter/a/b2d939/32.png) [@ashander](https://discourse.gohugo.io/u/ashander)\
**Post date:** [February 6, 2017, 5:09pm UTC](https://discourse.gohugo.io/t/image-path/1721/11 "2017-02-06T17:09:43Z")

</div>

The above answers are helpful, but I found that when using a `baseURL` that is not the root of the website I had to also add `canonifyURLs: true` to the config.yml

Then the markdown `![](/images/pic.jpg)`  
worked to reference image content from `static/images/pic.jpg`

---

<div class="post-metadata">

**Author:** ![claudix](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/claudix/32/8055_2.png) [@claudix](https://discourse.gohugo.io/u/claudix)\
**Post date:** [March 8, 2019, 10:06am UTC](https://discourse.gohugo.io/t/image-path/1721/12 "2019-03-08T10:06:30Z")

</div>

Specially on same host multilingual sites with different base URLs depending upon the language, setting canonifyURLs in config file is a **MUST** if you want to get the same results both in development mode (i.e. using `hugo server`) and in production mode (using the published directory tree).

---

<div class="post-metadata">

**Author:** ![mojoa](https://avatars.discourse-cdn.com/v4/letter/m/8491ac/32.png) [@mojoa](https://discourse.gohugo.io/u/mojoa)\
**Post date:** [March 8, 2019, 1:52pm UTC](https://discourse.gohugo.io/t/image-path/1721/13 "2019-03-08T13:52:32Z")

</div>

Just curious. You mention this in a very old thread.  
Is this a tip you you did not find stated in the documentation?

---

<div class="post-metadata">

**Author:** ![claudix](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/claudix/32/8055_2.png) [@claudix](https://discourse.gohugo.io/u/claudix)\
**Post date:** [March 8, 2019, 2:07pm UTC](https://discourse.gohugo.io/t/image-path/1721/14 "2019-03-08T14:07:11Z")

</div>

I read the current documentation and I was frustrated after not finding more hints for setting up my multilingual site. My case is a single-host but different url base upon language (i.e. “[http://myhost/en](http://myhost/en)” for English and “[http://myhost/fr](http://myhost/fr)” for French). In my case, when relative links worked using hugo’s server, then they didn’t work using the generated site. And viceversa, when I managed to make them work in the generated site, they didn’t work using hugo’s server. By setting canonical paths all links where generated fine in both environments.

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [November 26, 2019, 7:16am UTC](https://discourse.gohugo.io/t/image-path/1721/16 "2019-11-26T07:16:31Z")

</div>


