Level 63
For using with VueJS, I suggest you to handle the Spatie methods only in the backend and pass the results as params to the VueJS views.
You can for example preload the medias with the model.
1 like
Sep 25, 2022
5
Level 4
Spatie Media library with Vuejs
I'm building a project with Laravel, Vue and Inertiajs. In this project I'm allowing the user to upload product images. I want every image to be uploaded, converted to webp, optimized in size, generates responsive images and then displayed to the user. I figured that Spatie media library package can do that for me displaying responsive images part.
The only question is how to display responsive images in a Vue component. They provide helpers for blade components but I'm using Vue with Inertia.
The way they explained it in the docs for blade is like this:
{{-- in a Blade view --}}
<h1>My responsive images</h1>
{{ $yourModel->getFirstMedia() }}
So I'm wondering how can I pass this to a Vue component and make is parse HTML same as the package would do for a blade component.
Level 4
In contoller:
'img' => $post->getFirstMedia()->toHtml()
In Vue:
<div v-html="img"></div>
1 like
Level 63
@MooseSaid Did my answer not help you ?
Level 4
@vincent15000 It was 1 year ago so I honestly don't remember! But it looks like it's stating the same solution I came up with. So, I'll set it as a Best Answer instead of my answer :)
1 like
Level 7
Thanks but how to retrieve multiple images with getMedia() ?? pass an Array in props just result me of a long strings ... Thanks you
1 like
Please or to participate in this conversation.