How to load images with Inertia?

Hey I am using Inertia + Laravel + Vue in Docker and I don't know how to access images stored in MYSQL DB. I created a sym link with php artisan storage:link. I store the image like so:

            PlantImage::create([
                'image_path' => $request->file('image')->store('public/plants'),
                'plant_id' => Plant::latest('id')->value('id')
            ]);

The stored image looks like this in my DB public/plants/Zo4LK7Ze3wYbv60n8ddbgFa3vkl8dwrXoQcJPBqg.jpg. The image also exists in public/storage/plants/IMG_ID.jpg as well in storage/app/public/plants/IMG_ID.jpg Since I am using Vue for my Front End I can't use Laravel methods to get images like <img src={{assets(PATH_TO_IMG)}}. My first goal was trying to access the image through the url e. g. http://localhost/plants/Zo4LK7Ze3wYbv60n8ddbgFa3vkl8dwrXoQcJPBqg.jpg. But I always get 404 error when I try to access files/images from the sym link. If I store the image directly in public folder (public/images) I can access it.

I dont know if it has something to do with Laravel Mix, because after every successful compilation it lists all the assets/images in the public folder, but never the assets from sym link folder (storage/app/public). It's just one theory.

Niush

3 years ago

Level 50

This should be your url instead: http://localhost/storage/plants/IMG_ID.jpg (include the storage folder)

You can append values to json like shown in the documentation: https://laravel.com/docs/9.x/eloquent-serialization#appending-values-to-json

class PlantImage extends Model
{
    protected $appends = ['full_image_path'];

    protected function fullImagePath(): Attribute
    {
        return new Attribute(
            get: fn () => asset($this->image_path),
        );
    }
}

This will include full_image_path in the response.

Please or to participate in this conversation.