2

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.

  • Can you try doing this without Sourcerer and see if you get the same results? – Lodder Jul 23 at 11:56
  • I've just tried adding this code snippet on my own site without Sourcerer (SEF enabled) and it work's perfectly fine. – Lodder Jul 23 at 11:59
  • @Lodder would you believe.. I had a space in my code here '<img src=" '+url+' ">' (between the double and single quotes). I obviously fixed it when asking the question and forgot about it! What a waste of a morning :/ Thanks for your help – jonboy Jul 23 at 12:10
  • 1
    Haha how unfortunate. Feel free to write this as an answer and mark it as accepted ;) – Lodder Jul 23 at 12:20
  • Hmm, why doesn't JSE have a close reason for Off-topic: Typo questions like this one? – mickmackusa Jul 23 at 12:30
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.

  • I'm still very interested as to how a space could result in the /example.com/ being prepended to the src value. I wonder if it's Sourcerer trying to be clever. – Lodder Jul 23 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.