Images not loading when using @asset

sage
,
1

EDIT: I have updated my question below with different information

I am struggling here because I’ve used the @asset directive with ease in previous sage sites. For whatever reason, two things are happening:

  • the image the templates aren’t using the hashed file name on with yarn build
  • yarn dev all assets are moved without a hash on the file name, but everything is put in the root public folder while the HTML references images with the images subfolder.

Here’s what I have done

  1. Included line-separator.png in my resources/images folder
  2. Created a reference to this file
<img class="img-fluid" src="@asset('images/line-separator.png')">
  1. ran yarn build
  2. Tried to load the page

The image does not load.
5. ran yarn dev

Noticed it created a file without the hash in the public folder, but the image still doesn’t load.

  1. The full path to the image is
http://www.demosite.test/app/themes/alk/public/images/line-separator.png

However on yarn dev it’s moving all files directly to the public folder without the images subfolder.

  • So why isn’t the blade template being rendered with the hashed file name on images
  • Should the template remove the images subfolder reference or is the build not moving images to their proper subfolders?
2

I changed my `bud.config.js to look like this

module.exports = async (app) => {
  app
....
....
....
    .assets([
      ['images', 'images']
    ])
....
....
....

Not sure why I had to do that on a default install, but all seems OK now.

3

I have the same problem. But only for SOME images.

So i have this in one of my blade file:

    <div class="md:w-[45%] w-full">
        <img src="@asset('images/thankyou.jpg" alt="Thank you for your order')" class="w-full h-[288px] md:h-[800px] object-cover" />
    </div>

and after building, I see in the manifest:

  "images/thankyou.jpg": "images/thankyou.6de72f.jpg",

But when the actual page is loaded, it’s linking to the image without the hash. So the file isn’t there after building.

The solution mentioned above isn’t working for me.

Thanks in advance!

4

You are missing ') after “.jpg”.

1 Like