Can't get the images to display on my first deploy (heroku, Laravel 9)

@Sinnbeck Another sonic-speed reply! :)

tl;dr they are located in app/public/storage/nekoimg/file-name.jpg

On my repo the public/storage folder does not exist, my understanding was I need to generate it the same way I did by running

heroku run php artisan storage:link

The command does not return any errors, so I decided to browse folder structure as per your advice. The folders seem to be in place, as well as files. Just like in local test environment, they are located in app/public/storage/nekoimg/file-name.jpg

@Pawooo Ok so your symlink is fine :) See it works!

https://neko-finder.herokuapp.com/storage/nekoimg/raoul-droog-yMSecCHsIBc-unsplash.jpg

So the problem is how you are loading them inside your blade files. Can you show the code for it?

@Sinnbeck It depends (maybe I totally screwed up that part 0_0)

For static image on my landing page I do this (I can already foresee the solution for this one :))

src="/nekoimg/tran-mau-tri-tam-FbhNdD1ow2g-unsplash.jpg"

For my carousel in my controller I first do this:

    public function index() {
        return view('nekos.index', [
            'nekos' => Neko::latest()->filter(request(['tag', 'nekosagashi']))->simplePaginate(8),
            'randImgs' => Neko::latest()
                            ->inRandomOrder()
                            ->limit(4)
                            ->get()
        ]);
    } 

Then in my blade:

                    @foreach ($randImgs as $randImg)
                        <li class="splide__slide"><img class="splide__img" src="{{$randImg['img']}}" alt="Cat Carousel Image"></li>
                    @endforeach

For each individual card I do this:

Controller:

'nekos' => Neko::latest()->filter(request(['tag', 'nekosagashi']))->simplePaginate(8),

Blade:

@foreach ($nekos as $neko)
 <x-neko-card :neko="$neko"/>
@endforeach

Component:

@props(['neko'])
img src="{{$neko['img']}}"

@Pawooo If the images are in storage, you need that to be part of the url :) So lets say this returns a path without storage {{$randImg['img']}}. Then add it to the path

And its recommended to use the asset() helper for all assets (css images etc) :)

@foreach ($randImgs as $randImg)
                        <li class="splide__slide"><img class="splide__img" src="{{asset('/storage/'.$randImg['img'])}}" alt="Cat Carousel Image"></li>
                    @endforeach

@Sinnbeck But how come it works on local without prepending /storage?

What kind of magic is this? :)

I'll try it out with asset(), one sec!

@Pawooo Sounds like an issue with your local setup? Are the files placed differently there perhaps? Like not in the storage folder?

@Sinnbeck Not sure if this matters, but storage folder itself is a shortcut (I hope this conveys what I'm trying to say), on mac it says "Alias." Since I have not created this folder manually I assumed that's just how artisan link works

@Pawooo Yeah that sounds correct. But I am curious how it works locally if the files are only inside the storage directory and not in the root of public/nekoimg. Are they perhaps in both places on your local pc?

@Sinnbeck That's definitely not the case, folder structure is as follows

| Public

||css

||img

||js

||misc

||storage

In order for that logic to apply I'd have to have 2 extra folders in here (nekoimg and purrsound)

@Pawooo Yeah. But then I dont see how the urls for the images can work locally as they dont have /storage in the url :)

Btw. The error you are facing currently seems to be due to have ' in the wrong places :)

Correct

{{asset('/storage/'.$randImg['img'])}}

Not correct

{{asset('/storage/$randImg['img']')}}

@Sinnbeck @michaelsholadiran IT'S ALIVE! Thank you guys so much! Now to fix the card image load and I can finally move onto next project!

@Pawooo Happy to help :)