Learn how to import assets within your HTML pages
Frontal supports loading and processing assets from within your HTML directly and also provides several ways to defining the paths of these assets.
Assume we want to load an asset that exists within the assets directory, we can use the
<img src="@assets/image/img-1.png" />
If we wanted to load an asset relative to the root directory of the project, we can prefix the path with
~/ as follows:
<img src="~/dir1/image/img-1.png" />
If we wanted to load an asset that exists within the
public directory, we can prefix the path with
/ as follows:
<img src="/img-1.png" />
Assets loaded from the public directory are not processed by Frontal in any way.
Lastly, we can load an asset directly from an installed package that exists within the
node_modules, assume we have
@fortawesome/fontawesome-free package installed, we can load assets from that package like so:
<img src="@fortawesome/fontawesome-free/svgs/solid/address-card.svg" />
Below is a list of all HTML tags that gets processed by Frontal:
frontal.config.js, however if
you need to load assets from within your HTML documents, a suffix of
.file should be used in order
for Frontal to treat it as an asset.
<link rel="stylesheet" href="@assets/style.file.css" as="style"> <script src="@assets/script.file.js"></script>