Как отобразить медиа файлы в компоненте Vue используя Spatie Laravel Media Library?

Question

[Cathari]

CRUD app (Laravel + Vue). User может загружать в свои таски медиа файлы с распределением по коллекциям используя Spatie Laravel Media Library. Не могу понять как теперь отобразить файлы в Vue компоненте?
Вот метод который возвращает нам допустим кол-цию с images:

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

простым перебором:

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

на странице собственно:

{ "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

[Gordon Freeman]

например на бэке можешь сделать аксессор длямодели, которая будет возвращать готовый урл к файлу, и на фронте уже использовать этот урл
также не забудь прокинуть аксессор в респонс добавив свойство в

/**
     * 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"....

Comments

[Cathari]

а можно в img src как то подставить {{ media.id }} {{ media.file_name }} ? что-то как ни колдую не получается.