Figure shortcode cannot find image in static folder in baseURL

I’m building a website at Github Pages, which has website address: Финэк МГИМО - Поступление на факультет финансовой экономики МГИМО

My baseURL is baseURL = ""

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

When running hugo server:

These do NOT work:

{{< 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:

{{< 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:

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

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

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”.

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

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

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

@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 ( = "") into figure - I would like to avoid that.

My question is how to make this work:

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

given my baseURL:

baseURL = ""

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

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.

1 Like

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

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

Here is a demo of src that do or do not work: Technical Page with Logos - Finec MGIMO

As per the config you are using multilingual mode.

The image you want to publish exists under the following URL:

In your project’s source code repo the image is located under:

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 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 (it includes the language code and there is no image in this address).

  5. The link /finec-mgimo-footer.png points to 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 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 or the relLangURL functions.


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.

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:

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

Error message:

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

{{< 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

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 and place it in your project under /layouts/shortcodes/figure.html

Then modify line 5 of the template with something like:

{{ $src := .Get "src" | absLangURL }}
<img src="{{ .Get $src }}"
1 Like

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