Home → How Do I... →

Linking to static images via dynamic JS

• Edit

Joseph Dillon

15 May, 2015 02:13 PM

I have a google map app that sets the icon based off of a path attribute that matches the folder structure in Cascade.

However when I go to load the icon it says the file is not there.

I can test that the path is correct by pulling up a background image used in our CSS, and then viewing it in a separate tab. The url is something like:

dev-environment.com/renderfile/<some really long random id>/path/to/image

Changing the path/to/image with the path to my icon will show me the icon.

So, if my path is correct, how do I reference the correct path with with javascript?

This discussion was closed! See this FAQ for more information:

1. Why aren't my CSS background images displaying inside of Cascade Server?

   CSS background images require special tags that let the system know you are referring to an image that is managed by Cascade Server. Consider the following lines in a CSS file:

   .content{
       background-image: url('/images/photo.png');
   }
   

   To link to this image from the CSS file within Cascade, the following steps must to be taken:

   • Click Edit on the CSS file containing the reference to the backgro...
   See more..

1. 1 Posted by Ryan Griffith on 15 May, 2015 02:29 PM

   

   Hi Joseph,

   It sounds as though Cascade may not be tracking the path to the image. Try surrounding the path to your icon with the [system-asset] pseudo tag to force Cascade to track the link.

   Please let me know if you have any questions or if adding the pseudo tag does not help.

   Thanks!

   • Edit

2. 2 Posted by Joseph Dillon on 15 May, 2015 03:28 PM

   

   I wrapped the paths in my js file with the [system-asset] tags, set the system to handle it, and it works great when I view the page on the layout and preview tabs. But when I publish the page and view it live the icon paths went from renderfile/<long id>/path/to/file to ../path/to/file and the icons no longer work.

   • Edit

3. 3 Posted by Ryan Griffith on 15 May, 2015 03:47 PM

   

   Hi Joseph,

   The relative path is to be expected because Cascade will rewrite the tracked links to be relative to the asset containing the link.

   Off the top of my head, you have a couple of options here:

   • Relocate the icons so the relative path is correct
   • Manually append the rest of the path information on the front of the published link so the URL resolves correctly
   • Switch the asset containing the links to publish absolute links as opposed to relative under the System tab. Note: this will affect all internal links within the asset's content

   Please let me know if you have any questions.

   Thanks!

   • Edit

4. 4 Posted by Joseph Dillon on 15 May, 2015 04:21 PM

   

   Thanks, maintaining absolute links worked great.

   • Edit

5. 5 Posted by Ryan Griffith on 15 May, 2015 05:25 PM

   

   Not a problem at all, Joseph, thank you for following up. I am glad to hear adjusting the link rewriting behavior did the trick.

   I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

   Have a great day!

   • Edit

6. Ryan Griffith closed this discussion on 15 May, 2015 05:25 PM.