Accessing Assets

find out how to use the asset url filter to generate a path to your assets and understand the benefits of hosting assets on our cdn introduction assets are stored directly on an amazon web services (aws) server, separate to the website you are building on they can be accessed using a content delivery network (cdn) from your website benefits the use of this method offers automatic caching control, which decreases the likelihood that someone views your website with anything other than the most up to date versions of your files the cdn also reduces page load times, as the assets are not stored on your site, but instead are distributed to over 100 edge locations around the world linking to assets if you have uploaded an image to the images folder using file manager, it will have a file path like this in the database images/sg logo white svg you would add the following liquid to your page, so that the server automatically appends the cdn url {{ 'images/sg logo white svg' | asset url }} you will see that the asset will render on the page with a similar path to this https //uploads prod01 oregon platform os com/instances/283/assets/images/sg logo white svg?updated=1549914206 each site has a unique cdn path, you can find out what yours is by rendering an image on the page and inspecting on it ?updated= is a parameter automatically included that time stamps your files, helping with cache control correct examples html stylesheets \<link rel="stylesheet" type="text/css" href="{{ 'css/styles css' | asset url }}" /> html javascript files \<script src="{{ 'js/myfile js' | asset url }}">\</script> html images {{ 'images/sg logo white svg' | asset url }} webapp asset field {{ this\['my field'] | asset url }} css images using / automatically appends the url to your asset within css files background image url(' /images/sg logo white svg'); / is relative to the location of your stylesheet this is especially useful for background images you can look up css relative paths online for more information vanity url in some cases you may wish to hide the aws cdn (https //uploads prod01 oregon platform os com) and only refer to the vanity domain of the site (https //www mydomain com) to dynamically achieve this, you can use the liquid parameter asset path rather than asset url when calling an asset to a page any of the above examples are also applicable with this method html image example {{ 'images/sg logo white svg' | asset path }} you will see that the asset will render on the page with your vanity domain in it's path, similar to this https //www mydomain com/assets/images/sg logo white svg?updated=1549914206 diagnosing issues if you cannot see the asset on your page then you can check the following common issues check the string you used for a path does not start with a forward slash or "assets" e g these will fail because the "/" or "assets/" beginning of the path will end up being added twice {{'assets/images/sg logo white svg' | asset url }} {{'/images/sg logo white svg' | asset url }} check the file manager or code editor shows the correct path for your asset, including any folders you should include the file extension for your asset in the path e g " jpg" e g this will fail because an asset's full name has not been included {{'images/sg logo white' | asset url }} make sure you wrap your path in quotes as it is a string e g here a string was forgotten and validation on admin or siteglide cli should not accept it {{images/sg logo white | asset url }}