How to display media files in Vue component using Spatie Laravel Media Library?

Question

Laravel

CRUD app (Laravel + Vue). A user can upload media files with collections to their tasks using the Spatie Laravel Media Library. I can't figure out how to display files in the Vue component now?
Here is a method that returns us a valid count with images:

public function mediaImages($id)
    {
        $task = Task::find($id);
        return $task->getMedia('images' );
    }

simple iteration:

<div v-for="media in allMedia">
            {{ media }}
        </div>

on the actual page:

{ "id": 18, "model_type": "App\\Task", "model_id": 1, "uuid": "ee2e432d-271f-4447-ae2f-197b0d9a55c7", "collection_name": "images", "name": "1", "file_name": "1.png", "mime_type": "image/png", "disk": "media", "conversions_disk": "media", "size": 650762, "manipulations": [], "custom_properties": [], "responsive_images": [], "order_column": 1, "created_at": "2020-10-19T18:20:38.000000Z", "updated_at": "2020-10-19T18:20:38.000000Z" }

Answer 1

for example, on the back you can make an accessor for the model that will return the finished url to the file, and on the front already use this url
also do not forget to throw the accessor into the response by adding the property to

/**
     * The accessors to append to the model's array form.
     *
     * @var array
     */
    protected $appends = [
        'url_cover',
    ];

    public function getUrlCoverAttribute()
    {
        return $this->getFirstMediaUrl('covers');
    }

<img :src="model. url_cover"....