Incorrect img src on staging of the site

support
1

Hi, everyone!

My issue is that on staging of the site imgs being built in js files are not shown due to incorrect src.
I have a project with structure of:
*assets
*js
*myfile.js
*static
*images
*someImg.svg

assets/js/myfiles.js creates an img and latter appends it to DOM:

...
let img = document.createElement("img");
img.src = "/images/someImg.svg"
...

Scipts are added to the document in head.html file:

{{ $myFileList := resources.Get "js/myfile.js" | minify | fingerprint }}
<script type="text/javascript" src="{{ $myFileList.RelPermalink }}" defer></script>

head.html is added to baseof.html:

<head>
  {{ partial "head_homepage" . }}
</head>

config.toml has baseURL = "/".
package.json structure:

"scripts": {
    "build_code_samples": "./build_code_samples.sh",
    "develop": "cd site && hugo server",
    "build": "cross-env HUGO_ENV=production hugo --minify -d ../dist -s site -v",
    "start": "hugo -d ../dist -s site -vw"
  },

I have an issue of /images/someImg not being shown on staging (localhost and prod are fine). It happens because staging have an url structure like: siteStaging/21984/ (where 21984 is PR number, so it’s always different). Everything works fine on localhost and prod, since there path doesn’t have any additional slashes with numbers. So my src calculates like “siteStaging/images/someImg.svg” insatead of "siteStaging/21984/images/someImg.svg. If i manually add /2194/ imgs are shown.

After some examination I came to conslusion that I should:

  • make js file to be included in hugo, so I changed head.html:
{{ $myFileList := resources.Get "js/myfile.js" | resources.ExecuteAsTemplate "js/myfile.js" . | minify | fingerprint }}
<script type="text/javascript" src="{{ $myFileList.RelPermalink }}" defer></script>
  • change js files themselves so the would pick up any URL by using relURL, but I can’t figure out what syntaxis should I use. I tried different variants, but none of them worked:
img.src = "{{ /images/arrow-expandable.svg |  relURL }}"
or
img.src = {{ "/images/arrow-expandable.svg" |  relURL }}
or
img.src = "{{ "/images/arrow-expandable.svg" |  relURL }}""

So the questions are:

  1. Is my approach correct at all?
  2. If yes, what is the correct syntaxis of doing it?
2

May I ask why you trying to amend IMG src using JavaScript?
Maybe hugo functions will fork better.

The other issue is that you trying to amend DOM before its generated. The JS is loaded in head before other HTML elements, including <img are generated. Maybe moving into footer or just before </body> will help.

However, this approach may raise more issues.

3
  • I came to the project, where things were already done this way.
  • Thank you for the advice. Ill try it.
  • As for relURL syntaxis could you, please, tell which one is correct:
img.src = "{{ /images/arrow-expandable.svg |  relURL }}"
or
img.src = {{ "/images/arrow-expandable.svg" |  relURL }}
or
img.src = "{{ "/images/arrow-expandable.svg" |  relURL }}"
4

I would say this, but its all depend. You need to check the output.
See also examples on this page where absURL is compared with relURL

1 Like