0

I've moved all my CSS and JS to the Cloudinary CDN and everything works except where the JS files need to grab an image.

I've got a index.html file thats pulling the JS and CSS from the CDN without issue but when JS goes looking for any image I get an error saying the resources is missing. On the CDN I've created a few folders for CSS, JS and images and used root paths in JS as normal, example: "./sprites/img1.png".

When I have this folder/img in the same directory as the local HTML file it works fine. If I move that folder to the CDN it cant find the resource.

Looks like once the JS is served to the local file it also expects local resources.

Is there anything I can do to prevent this besides placing the HTML file on the CDN as well. Cloudinary doesnt allow HTML to be served to the browser you see.

Thanks for any help and if you need further info dont hesitate to ask.

CDN Tree

Doc Green
  • 13
  • 4
  • 1
    `./` isn't a relative path. It's a root-specific path. – isherwood Apr 27 '21 at 18:28
  • Thanks, that shouldn't be causing the issue though. – Doc Green Apr 27 '21 at 18:28
  • 1
    Actually it is a relative path, but I don't think it's the right one. You may want `../`. Hard to say without seeing a tree structure. Maybe put that in a code block to help clarify. – isherwood Apr 27 '21 at 18:33
  • Could you elaborate? It works locally and all I've done is move the entire directory to a cdn to the path should be the same. – Doc Green Apr 27 '21 at 18:35
  • @DocGreen: If the js and sprites are in the same level, you should be accessing it with ../ as Isherwood said – naveen Apr 27 '21 at 18:35
  • Thanks for the support. I'll implement this and let you all know. – Doc Green Apr 27 '21 at 18:36
  • @DocGreen: Could you paste the cdn folder as an image? – naveen Apr 27 '21 at 18:36
  • Once I'm back in the office I will. – Doc Green Apr 27 '21 at 18:37
  • Updated with an image of the tree, so I'm following path B and as you can see the JS and Sprites are in the same parent folder thats why I thought ./ would work however instead off moving one up in the CDN its moving one up where the index file is. – Doc Green Apr 27 '21 at 19:44

1 Answers1

0

Found the issue. The paths in external JS files are relative to the Page they are included in (in this case the index.html page), not the actual location of the file.

Thats why it was searching the local directory and not the CDN. Solution comes from another Stack Overflow question:

Relative Paths in Javascript in an external file

Doc Green
  • 13
  • 4