To answer your question: "Is there a way to access template variables in .js files?" No, as Hugo builds, then Hugo's template codes no longer exist. JS runs on the built site.

To answer your other question: "If an image element is in .html (< img src="/images/image.png" >), the baseUrl is applied and the final url is this: website.com/variable/images/image.png/"

"If an image element is in .js (img.src = "/images/image.png"), the baseUrl is not applied and the final url is incorrect: website.com/images/image.png/"

I would suggest you use image processing and generate the full links, and then you can access/no deal with your image links, but I would need more data about your set-up. Hopefully that gives you enough to work with.

You can do something like this:

{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}

Then in your JS file:

import * as params from '@params';

For example, I have this in one of my sites:

{{- $msftclarityjs := resources.Get "js/analytics-msftclarity.js" | js.Build ( dict "params" ( dict "msftclarityid" $msftclarityid ) ) -}}

Then in the analytics-msftclarift.js file I have this:

import * as params from '@params';

…

(window, document, "clarity", "script", params.msftclarityid);

See Hugo docs JavaScript Building for more info.