HTML Assets

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 @assets alias as follows:

<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 the @fortawesome/fontawesome-free package installed, we can load assets from that package like so:

<img src="@fortawesome/fontawesome-free/svgs/solid/address-card.svg" />

Supported HTML tags

Below is a list of all HTML tags that gets processed by Frontal:

Tag With Attributes
audio src
embed src
img src and srcset
input src
script src, xlink:href and href
source src and srcset
track src
video src and poster
link href
image xlink:href and href
object data
use xlink:href and href

Using script and link tags

Assets such as Style and Javascript files should be configured within your 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>
Would You Like To KnowAbout Our Next Products & Free Tools?