arrow_back How do I display media files in a Vue component using the Spatie Laravel Media Library?

1 vote
CRUD app (Laravel + Vue). User can load media files into their tascas with collection distribution using Spatie Laravel Media Library. I can't figure out how to display the files in the Vue component now?
This is the method that returns, let's say, the quantity from images:
public function mediaImages($id)
$task = Task::find($id);
return $task->getMedia('images' );
with a simple overshoot:
<div v-for="media in allMedia">
{{ media }}
on the page itself:
{ "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" }

1 Answer

0 votes
For example, at the back you can make an accessor for the model, which will return a ready-made url to the file, and at the front already use this url
Also, don't forget to cast the accessor in the response by adding the property in
* The accessors to append to the model's array form.
* @var array
protected $appends = [

public function getUrlCoverAttribute()
return $this->getFirstMediaUrl('covers');
<img :src="model. url_cover"....

1 comment

Can I substitute {{ }} in the img src? {{ media.file_name }} I can't get it to work.