Custom JS Module and Image Src Broken

by jonboy   Last Updated July 11, 2019 11:10 AM - source

I'm using HD-AnyCode to insert come custom JS in a module, i'm then displaying this module in a Joomshaper template.

The custom JS is basically calling an external API and returning data, i'm then looping over this data and displaying the results in a HTML block on the website.

The code is working fine, i'm able to display all the results from the API on screen. One variable returned from the API is url, it's in the following format;

url: ""

Whenever I insert this into an img tag using JS, the src is always prefixed with my site name - why is this?

For example, this JS;

return `<img src="${card['evLogo']}">`

Should display;

<img src="/" >

Instead it displays;

<img src="/mySite/">

This is resulting in the images not displaying and 404 errors in the console.

The site I am working on is on localhost XAMPP, and the URL I use to access it is localhost/mySite

Any ideas why this would be?

I thought it may have something to do with the order the page is rendered / loaded?

I should add that whenever I test the JS locally, standalone on codepen or a local html website it works fine, images and all.

All my JS code is wrapped in $( document ).ready(function() {}); if that makes any difference?

Related Questions