Images, fonts and assets

Propel uses Vite for the files your pages load. Images and fonts are copied into the build, and you refer to them by their source path.

In templates: asset()

<img src="{{ asset('resources/images/logo.svg') }}" alt="Logo">

• The path is relative to the project root, and must start with resources/images/ or resources/fonts/.
• Paths that start with / or contain .. are rejected.
• In development, the URL points at the dev server. In production, it points at the built file.
• A missing file fails the page with an error that names it.

In CSS: the aliases

.hero {
    background-image: url("@images/hero.jpg");
}

@font-face {
    font-family: "Inter";
    src: url("@fonts/Inter-Regular.woff2") format("woff2");
}

Aliases resolve to resources/images, resources/fonts, resources/css (@styles) and resources/js (@scripts). Vite hashes files used this way, so browsers never keep an old copy.

Entries: @vite

@vite(['resources/css/app.css', 'resources/js/app.js']) writes the tags for each entry. A stylesheet that a script imports is loaded with it.

Production caching

Files referenced only by asset() are copied without a hash. A browser can keep an old copy when the file changes, so rename the file. Files used from CSS are hashed.

Full guide

The assets guide covers the folder layout, the config files, the production steps and troubleshooting.