Referencing Assets¶
Note
In this section it’s assumed your compiled assets are located under web/assets/
.
In templates¶
To reference an asset from a template, you do as you normally would, with Symfony’s asset
helper:
<img src="{{ asset('images/foo.png') }}" />
Note
You’re referencing the compiled asset, from the web/assets
directory, not the source asset.
This will automatically prefix, and when in production cache-bust, the URL so the previous call would ouput:
<img src="/assets/images/foo.png" />
Or, in production:
<img src="/assets/images/foo-123abc.png" />
In styleshets¶
It’s common that you need to reference images from your stylesheets. To do that, use the url()
notation and the full path to the image, relative to web/assets/
:
background-image: url(images/foo.png);
Note
Remember that you’re referencing the compiled asset, from the web/assets
directory, not the source asset.
Tip
Never reference images in stylesheets with a relative path like ../images/foo.png
. Relative paths make the code harder to reason about, are unnecessary and will be converted to the absolute path (i.e. ../
is stripped).
The compiled CSS would be:
background-image: url(/assets/images/foo.png);
Or, in production:
background-image: url(/assets/images/foo-123abc.png);