In production built with Version 3.0.0 my images don’t load if they are specified in the CSS as a background say:.
background: transparent url(“/assets/arp/page_images/impey/std_bg.gif”) repeat scroll 0% 0%;
It only works if I prepend to it the name of the folder that the app is in at production time. But I don’t want to do that because the app gets deployed to different directory names.
I always seem to have to faff with the path putting on ellipsis like background:
transparent url(“…/…/…/…/…/…/arp/page_images/impey/std_bg.gif”) repeat scroll 0% 0%;
when really I want something that will work in both cases but I don’t want to write the deployed directory name in the CSS because then obviously I will have to skirt through all the CSS changing paths everytime I deploy the app to a different folder name.
Seems broken! Surely it should always load the css relative to the rootURL variable? I am setting it.
Bear in mind that the path for background url CSS property is relative to the stylesheet that it is being loaded from (probably <app-name>.css), so the relative path should reflect where the image is relative to this file in your production environment, probably ../arp/page_images/impey/std_bg.gif ?
CSS paths can also be root relative (which is how the original example is listed.) I don’t know why they wouldn’t be working though, we use root relative for all of our CSS images (and image src in HTML for that matter) so that it doesn’t matter where the CSS or component files live in the directory structure.
Actually, in regards to the original issue - I think you shouldn’t need the assets folder?
You are both right, I had been originally trying to use root relative urls, this was failing because the -environment=production rootURL is different to the dev rootURL (I was testing this in the config/environment.js and set it accordingly).
if (environment === ‘production’) // PRODUCTION:80
{
ENV.USEWEBSERVICE = false;
console.log(“Production Mode: Please ensure that subDirectory in Configuration.js has the sub directory name in it otherwise images won’t work!”);
ENV.rootURL = “/roomviewer-” + customer + “/”;
ENV.OFFLINE_CATALOGUE_DATA_FOLDER = ENV.rootURL + “data-” + customer;
}
else // DEV:4200
{
ENV.USEWEBSERVICE = true;
console.log(“DEV:4200 Mode”);
ENV.rootURL = “/”; // Runs off the 4200 inside the folder already
ENV.OFFLINE_CATALOGUE_DATA_FOLDER = “/data-” + customer; // This folder is in the public folder, while in DEV.
}
I have got around it why making the rootURL the same in both cases. Quite obvious in hindsight not sure why I felt the need to write this post.
My Dev rootURL had been “/” and the production one is the name of the client.
Thanks.