SEF URL Broken Image Links When Fetching API Results

Question

Using Joomla 3.9.8

I'm using the fetch() api in order to retrieve some data from a remote API. When I have the api results I'm displaying them in html elements.

The API returns various values, one of these is url, I need to insert this url into an image src. This is normally pretty easy, but i've noticed that when I try this in Joomla the image src is rewritten and prefixed with my site name. This is causing broken images.

In order to insert the code i'm using Sourcerer and a custom html module.

I've created a stripped back example to demonstrate the issue. For this example I will use the random user api, but the logic is the same with any api.

The code I am inserting into the custom html module using sourcerer is;

<script>
fetch("https://randomuser.me/api/")
    .then(response => response.json())
    .then(data => {
      var url = data.results[0].picture.large;
      console.log(url);
      // displays https://randomuser.me/api/portraits/men/47.jpg
      console.log('<img src=" '+url+' ">');
      // displays <img src="/example.com/ https://randomuser.me/api/portraits/men/47.jpg " >
})
</script>

I am logging the url variable to the console, and the issue is clear. The image src is being prefixed with my domain name.

Here's a fiddle containing the exact same code, different results.

I'm almost certain it's an issue with Joomla SEF URLs because when I disable the plugin > System - SEF everything works as expected.

I've read an article explaining the issue and some possible troubleshooting steps like re-arranging the plugin order, but nothin appears to work.

Hopefully someone can help as i've been stuck on this for quite a while now.

Answer 1

So... I made this far too difficult for myself.

The answer is that I had a space in my code, right after the opening img src=" this was causing the Joomla SEF plugin to prefix my domain URL in the space.

Original code;

console.log('<img src=" '+url+' ">');

Working code;

console.log('<img src="'+url+'">');

Hope this saves someone else a few hours work.