Solving the problem of displaying images in multi-language Hugo articles

When creating multi-language content on Hugo, I have a problem - in the main language the images in the article are displayed normally, but when I switch the language to an additional language, the images are no longer displayed.

All pictures are stored in the same folder where the markdown file with the article.

Hugo exports articles in this structure. You can see that all pictures are stored in the main language folder (hugo-obsidian folder), and there are no pictures in the en language folder, which is correct because they don’t need to be duplicated.

├─── en
│ ├──── hugo-obsidian
│ │ └──── index.html
├─── hugo-obsidian
│ ├─── 1.png
│ ├─── 10.mp4
│ ├─── 2.png
│ ├─── 3.png
│ ├─── 4.png
│ ├─── 5.png
│ ├─── 6.png
│ ├─── 7.png
│ ├─── 8.png
│ ├─── 9.png
│ └─── index.html

When displaying the article in the main language, the path to the image is relative. That is, when you open the article /hugo-obsidian/ all images will be displayed because they are in that folder.

<img loading="lazy" src="4.png" alt="Зашифрованные файлы">

When displaying the article in an additional language, the path to the image is also relative. That is, when opening an article /en/hugo-obsidian/, the pictures will try to open from the same folder, but they are not there.

<img loading="lazy" src="4.png" alt="Encrypted files">

I get errors that the iamges are not found.

You need to make it so that in an article in an additional language the pictures are opened from the folder of the main language. To do this, you need to change the rendering of images. There are render hooks in Hugo for this purpose.

You need to create a file layouts/_default/_markup/render-image.html with this code:

{{- $alt := .Text | safeHTML }}
{{- $title := .Title | safeHTML }}
{{- $src := "" }}

{{- $u := urls.Parse .Destination }}
{{- if $u.IsAbs }}
  {{- /* Get remote image. */}}
  {{- with resources.GetRemote $u.String }}
    {{- with .Err }}
      {{- warnf "%s" . }}
    {{- else }}
      {{- /* https://discourse.gohugo.io/t/36397 */}}
      {{- $i := .Content | resources.FromString (path.Join "assets/images" .Name) }}
      {{- $src = $i.RelPermalink }}
    {{- end }}
  {{- else }}
    {{- warnf "Unable to retrieve remote image %q" $u.String }}
  {{- end }}
{{- else }}
  {{- with .Page.Resources.GetMatch $u.String }}
    {{- $src = .RelPermalink }}
  {{- else }}
    {{- $ext := path.Ext $u.String }}
    {{- $path := printf "%s.%s%s" (strings.TrimSuffix $ext $u.String) $.Page.Lang $ext }}
    {{- with .Page.Resources.GetMatch $path }}
      {{- $src = .RelPermalink }}
    {{- else }}
      {{- with resources.Get $u.String }}
        {{- $src = .RelPermalink }}
      {{- else }}
        {{- warnf "Unable to retrieve local image %q" $u.String }}
      {{- end }}
    {{- end }}
  {{- end }}
{{- end -}}

<img src="{{ $src }}" {{- with $title }} title="{{ . }}" {{- end }} {{- with $alt }} alt="{{ . }}" {{- end }}>

There will be the absolute path to the image when opening the article in the main language:

<img src="/hugo-obsidian/4.png" alt="Зашифрованные файлы">

And when you open an article in an additional language, there will be the same absolute path without the language /en/:

<img src="/hugo-obsidian/4.png" alt="Encrypted files">

This means that the images will be opened from the article with the main language.