Sage 11 + Vite - @asset directive not working

sage
,
1

What’s the correct way to reference an image asset in Blade?

Is that even documented? If it is, I have yet to figure out where to find it.

Thanks!

2

Try {{ asset('...') }} or {{ Vite::asset('...') }} instead of the directive. The latter should work for sure, but I think the first one does too.

1 Like
3

@Log1x thank you for your suggestion.

It seems like, for some reason, the manifest.json file is not getting published. When using {{ asset('images/cover-image.avif') }}, I’m getting the following exception:

Fatal error: Uncaught Roots\Acorn\Assets\Exceptions\ManifestNotFoundException

Which is referring to The asset manifest [/Users/.../Local Sites/tdh/app/public/wp-content/themes/tdh/public/manifest.json] cannot be found.

When calling the {{ Vite::asset('images/cover-image.avif') }} static method, I’m getting a 404 Not Found exception, referring to

GET
  http://[::1]:5173/app/themes/sage/public/build/images/cover-image.avif

Any idea of what’s causing this?

4

I also ran npm run build, which created a build/assets directory located inside public. And I can see my cover-image-DSsIqvXq.avif in there, but no way to access it.

5

In your public/build directory, do you see a manifest after you run the build command?

If yes, you’ll need to reference the image the same way it’s listed in the manifest. You probably need resources added to the path. eg. resources/images/cover-image.avif

3 Likes
6

@csorrentino the structure of my public/build directory is:

.
├── build
│   ├── assets
│   │   ├── app-D-TnrBR6.css
│   │   ├── app-l0sNRNKZ.js
│   │   ├── editor-CfU4GbSP.js
│   │   ├── editor-jAUPbkXe.css
│   │   ├── cover-image-DSsIqvXq.avif
│   │   ├── tdh-logo-vector-DQ0grIrs.svg
│   │   └── theme.json
│   ├── editor.deps.json
│   └── manifest.json
└── hot

So yes, the manifest.json file is in there. As per your advice, I prepended resources/ to my asset’s path, i.e.

{{ Vite::asset('resources/images/cover-image.avif') }}

and that suddenly made it work.

I am so grateful for your help.