Sage: Displaying images in assets / images folder

What if you want to use the image assets inside CSS? @nathobson

If I’m using an SVG for a background image, will it still register the hash in CSS?

What have you tried? Please don’t ask just to ask, please try :slight_smile:

1 Like

SVG images will get the hash on build if used as background images in CSS.

Also, it confused me for a little while how to get the hash for SVGs used inside PHP. The trick is to use the asset_path() function like so:

<img src="<?= asset_path("images/image.svg"); ?>">

1 Like

Thanks, works perfectly.

Should asset_path() be available in Sage 9? don’t see it anywhere …

Hey @trainoasis - check helpers.php. :wink:

1 Like

Indeed, ty, but somehow not callable in front-page.php? (function does not exist). I guess I’m doing something wrong? :slight_smile:

Quite possibly! Can’t say without your code, but my guess is that you aren’t referencing the right namespace.

Default new Sage install, not referencing anything, am on front-page.php, just calling {{ asset_path() }}. But same happens on other pages :slight_smile:

Sounds like you’re actually in front-page.blade.php?

In your Blade templates, use the @asset directive instead of calling asset_path().

Check out the docs here:

BTW the docs have a new search field in the sidebar powered by Algolia, so finding references to things like this is much quicker now–definitely encourage everyone to take advantage of it!


Nice!! Never used this before, awesome :slight_smile: Will check the new search as well, thank you.

1 Like

Related to asset_path(), that’s why I did not open a new ticket: is there an option to check for file existence first? Similar to @includeif directive for example?

The use case is, we have certain video files that we put in a theme location and they are based on language, say video_en.mp4, video_es.mp4, video_fr.mp4 and so on …

What I’d like to do is check for file existence and use default EN language file if the file does not exists.
I tried with PHP’s file_exists() but it returns false when I pass in my asset_path().

Thanks for any tips

Not as part of asset_path() no, I don’t believe so. You can check out the code behind it right here:

I’ve never needed to determine existence of an asset, but I have needed to get the absolute path (i.e. for embedding SVGs), and I used the following technique:

// in /theme/config/assets.php add the following to the array:

'path' => get_theme_file_path().'/dist',

// in `app/helpers.php` add the following:

 * Get the absolute path to an asset.
 * @param string $asset
 * @return string
function locate_asset($asset)
    return trailingslashit(config('assets.path')) . sage('assets')->get($asset);

// Now you can do something like this:

 * Determine if asset exists.
 * @param string $asset
 * @return bool
function asset_exists($asset)
    return file_exists(locate_asset($asset));

thanks @alwaysblank :hugs: Unfortunately my file_exists still returns false every time even though the path is okay (using assets.uri instead of .path, probably Sage 9 difference…).

I needed to pass local path without the domain to file_exists …

So what works is:

Add to app/config/assets.php:

'relative_path' => get_theme_file_path().'/dist'

then use where you need to check for file existence (say, in one of the controllers):

$path = config('assets.relative_path') . '/videos/video_'.ICL_LANGUAGE_CODE.'.mp4';
if(file_exists($path)) {
    return asset_path('videos/video_'.ICL_LANGUAGE_CODE.'.mp4');
// here return a default video for example that you know exists for sure

I am running Sage 9 here with Tailwind 2.0 on a new project. So far all the background images I’ve been using come from the /uploads folder via ACF. Some image tag files come from /uploads and /assets. Image backgrounds from assets are not showing up.

I’ve just now attempted to use a background image via the assets folder:

.xbackground {
  background-image: url('../images/parallax-overlay.svg');

Which results in this:


I’m assuming this has something to do with the Tailwind 2.0 setup with Sage 9 but I’m not sure what it could be.

Check out this PR that updates webpack 3 to webpack 4 in Sage 9.x and fixes a ton of known issues, including yours (URL resolve):


How would one go about adding this to a project?

I’m getting the [object Oblect] bug and need to fix it.

If you still need this, there is now a guide for installing the Sage 9.x update branch:

1 Like