# Figure shortcode cannot find image in static folder in site.com/subsite baseURL

**URL:** <https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357>\
**Category:** support\
**Created:** [June 12, 2021, 6:51pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357 "2021-06-12T18:51:59Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 12, 2021, 6:51pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/1 "2021-06-12T18:51:59Z")

</div>

I’m building a website at Github Pages, which has `name.github.io/subsite` website address: [Финэк МГИМО - Поступление на факультет финансовой экономики МГИМО](https://epogrebnyak.github.io/finec-mgimo-v2/)

My baseURL is `baseURL = "https://epogrebnyak.github.io/finec-mgimo-v2/"`

I have a problem referencing an image at static folder with `figure`.

When running hugo server:

These do NOT work:

```auto
{{< figure src="/static/finec-mgimo-footer.png" title="/static/finec-mgimo-footer.png" >}}

{{< figure src="/finec-mgimo-footer.png" title="/finec-mgimo-footer.png" >}}

```

These do work:

```auto
{{< figure src="/finec-mgimo-v2/finec-mgimo-footer.png" title="/finec-mgimo-v2/finec-mgimo-footer.png" >}}

{{< figure src="http://localhost:1313/finec-mgimo-v2/finec-mgimo-footer.png" title="http://localhost:1313/finec-mgimo-v2/finec-mgimo-footer.png" >}}

```

The last one I added to make sure the file exists at all.

My interpretation in baseURL the relative path part gets dropped, but and it is hard to see how to take it back.

From reading other posts I learned:

- hugo serve affects baseURL, ok, but same behaviour is in the static files: [Логотипы - Финэк МГИМО](https://epogrebnyak.github.io/finec-mgimo-v2/logo/)
- canonifyURLs may help

What should I try to make figure shortcode work without recourse to subsite name?

---

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 12, 2021, 6:58pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/2 "2021-06-12T18:58:03Z")

</div>

In short my problem is that `{{< figure src="/finec-mgimo-footer.png" > }}` points to  
`http://localhost:1313/finec-mgimo-footer.png`, and not to `http://localhost:1313/finec-mgimo-v2/finec-mgimo-footer.png`.

Any ideas how to change this behaviour appreciated

---

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 12, 2021, 7:03pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/3 "2021-06-12T19:03:24Z")

</div>

Looks like `canonifyURLs = true` solves this. Maybe for documentation there shoul dbe a special mention like “if you develop for Gihub Pages, use canonifyURLs = true”.

---

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 12, 2021, 7:06pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/4 "2021-06-12T19:06:05Z")

</div>

But no - `canonifyURLs = true` breaks the menus when introduced.

---

<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:** [June 12, 2021, 7:17pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/5 "2021-06-12T19:17:51Z")

</div>

> [@epogrebnyak](#):
>
> What should I try to make figure shortcode work without recourse to subsite name?

Try removing the forward slash from the beginning of the image PATH in the shortcode input, like so:

```auto
{{< figure src="finec-mgimo-v2/finec-mgimo-footer.png" title="finec-mgimo-v2/finec-mgimo-footer.png" >}}

```

---

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 12, 2021, 7:47pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/6 "2021-06-12T19:47:59Z")

</div>

> [@alexandros](#):
>
> `finec-mgimo-v2/`

@alexandros, thanks for suggestion - `/finec-mgimo-v2/finec-mgimo-footer.png` does show the image, I’m just upset and confuse I have to be copying a part of my baseURL ( `= "https://epogrebnyak.github.io/finec-mgimo-v2/"`) into `figure` - I would like to avoid that.

My question is how to make this work:

```auto
{{< figure src="/finec-mgimo-footer.png">}}

```

given my baseURL:

```auto
baseURL = "https://epogrebnyak.github.io/finec-mgimo-v2/"

```

---

<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:** [June 12, 2021, 8:06pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/7 "2021-06-12T20:06:05Z")

</div>

Did you try my suggestion? I do not quite gather from your reply that you did…

> [@epogrebnyak](#):
>
> My question is how to make this work:
> 
> ```auto
> {{< figure src="/finec-mgimo-footer.png">}}
> 
> ```
> 
> given my baseURL:
> 
> ```auto
> baseURL = "https://epogrebnyak.github.io/finec-mgimo-v2/"
> 
> ```

The above will not work because you are publishing to a sub-directory and the forward slash at the beginning of the image PATH will point to the domain host root, therefore the image will be 404.

That is why I suggested that you eliminate the first forward slash from your image PATH input.

---

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 12, 2021, 10:16pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/8 "2021-06-12T22:16:09Z")

</div>

`figure src="/finec-mgimo-v2/finec-mgimo-footer.png"` is the right path, whil `figure src="finec-mgimo-v2/finec-mgimo-footer.png"` will attempt to look at current folder and  
constructs `https://epogrebnyak.github.io/finec-mgimo-v2/logo/finec-mgimo-v2/finec-mgimo-footer.png`

It is strange I cannot get rid of `finec-mgimo-v2` at all in `src`.

---

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 12, 2021, 10:26pm UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/9 "2021-06-12T22:26:54Z")

</div>

Here is a demo of src that do or do not work: [Technical Page with Logos - Finec MGIMO](https://epogrebnyak.github.io/finec-mgimo-v2/en/logo/)

---

<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:** [June 13, 2021, 6:23am UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/10 "2021-06-13T06:23:50Z")

</div>

As per the [config](https://github.com/epogrebnyak/finec-mgimo-v2/blob/main/config/_default/config.toml) you are using multilingual mode.

The image you want to publish exists under the following URL:  
`https://epogrebnyak.github.io/finec-mgimo-v2/finec-mgimo-footer.png`

In your project’s source code repo the image is located under:  
`finec-mgimo-v2/static/finec-mgimo-footer.png`

Let’s break down what you’re doing in the link you shared:

1. The link `/static/finec-mgimo-footer.png` is wrong because the `/static/` folder does not need to be entered into the img link.

2. The img link `/finec-mgimo-v2/finec-mgimo-footer.png` that includes the subdirectory `/finec-mgimo-v2/` does displays the sample published project, because as I said above the first forward slash points to the host root (you hadn’t shared that you are using multilingual mode above).

3. The link `/finec-mgimo-footer.png` again points to the host root domain (due to the first forward slash) but in this case `https://epogrebnyak.github.io/` throws a 404 since your project is published under the `/finec-mgimo-v2/` subdirectory (you haven’t included it like you did in image 2).

4. The link ` finec-mgimo-v2/finec-mgimo-footer.png` is 404 because it points to `https://epogrebnyak.github.io/finec-mgimo-v2/en/logo/finec-mgimo-v2/finec-mgimo-footer.png` (it includes the language code and there is no image in this address).

5. The link ` /finec-mgimo-footer.png` points to `https://epogrebnyak.github.io/finec-mgimo-footer.png` but again there is no image under the domain host root since your project resides under the `/finec-mgimo-v2/` subdirectory.

6. The link ` finec-mgimo-footer.png` again points to `https://epogrebnyak.github.io/finec-mgimo-v2/en/logo/finec-mgimo-footer.png` same as in image 4.

7. The link ` http://localhost:1313/finec-mgimo-v2/finec-mgimo-footer.png` is wrong since we never enter the local server URL to construct a URL for a published asset.

* * *

Rather than hardcoding the PATH in a link to an image that resides under the static folder a better and more portable way would be to use either the [` absLangURL`](https://gohugo.io/functions/abslangurl/) or the [`relLangURL`](https://gohugo.io/functions/rellangurl/) functions.

---

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 13, 2021, 8:14am UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/11 "2021-06-13T08:14:12Z")

</div>

> [@alexandros](#):
>
> The link ` http://localhost:1313/finec-mgimo-v2/finec-mgimo-footer.png` is wrong since we never enter the local server URL to construct a URL for a published asset.

It is a bit strange localhost link actually provides an image even ob published assets - something I introduced for local testing, but accidently shows an image even on built site.

---

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 13, 2021, 8:44am UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/12 "2021-06-13T08:44:43Z")

</div>

> [@alexandros](#):
>
> use either the [` absLangURL`](https://gohugo.io/functions/abslangurl/) or the [`relLangURL`](https://gohugo.io/functions/rellangurl/) functions.

Thanks for detailed breakdown of the cases, I think portability is what I try to achieve, even though in somewhat choatic steps.

Could not find how to add fucntions in figure, below breaks:

```auto
{{< figure src="{{ "finec-mgimo-footer.png" | absURL }} ">}}

```

Error message:

```auto
"C:\Users\epogr\Documents\GitHub\finec-mgimo-v2\content\en\logo\index.md:35:41": unrecognized character in shortcode action: U+007C '|'. Note: Parameters with non-alphanumeric args must be quoted

```

````auto
33
34
35
``` ```
---

{{< figure src="finec-mgimo-footer.png" | absURL >}}

````

I thinl I’m getting something similar to [Deploying as a GitHub Project Page based site needs canonifyurls = true · Issue #7714 · gohugoio/hugo · GitHub](https://github.com/gohugoio/hugo/issues/7714)

---

<div class="post-metadata">

**Author:** ![epogrebnyak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/epogrebnyak/32/8081_2.png) [@epogrebnyak](https://discourse.gohugo.io/u/epogrebnyak)\
**Post date:** [June 13, 2021, 9:06am UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/13 "2021-06-13T09:06:31Z")

</div>

> [@alexandros](#):
>
> to use either the [` absLangURL`](https://gohugo.io/functions/abslangurl/) or the [`relLangURL`](https://gohugo.io/functions/rellangurl/) functions.

Is it possible to use these fucntions in markdown?

---

<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:** [June 13, 2021, 10:48am UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/14 "2021-06-13T10:48:50Z")

</div>

> [@epogrebnyak](#):
>
> Is it possible to use these fucntions in markdown?

No. The functions need to go in the figure shortcode template.

If you are using the Hugo internal figure shortcode you can copy its contents from [here](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html) and place it in your project under `/layouts/shortcodes/figure.html`

Then modify [line 5](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html#L5) of the template with something like:

```auto
{{ $src := .Get "src" | absLangURL }}
<img src="{{ .Get $src }}"

```

---

<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:** [June 15, 2021, 10:49am UTC](https://discourse.gohugo.io/t/figure-shortcode-cannot-find-image-in-static-folder-in-site-com-subsite-baseurl/33357/15 "2021-06-15T10:49:31Z")

</div>

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