How to fetch image with inertia js and spatie media library

Question

so I'm using spatie media library and I can upload images to storage and database. And I'm trying to display multiple images in a vue component. This is my Controller.

public function showHotelPhoto($id)
{
    $hotel = Hotel::first()->getFirstMedia('images')->getUrl();
    return Inertia::render('AdminHotelPhoto', [
        'data' => $hotel,
    ]);
}

And this my vue component, and I already success to fetch the image URL but only one image URL. And in my cases, I need to display all media from the database.

<template>
    <breeze-authenticated-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Foto Hotel
            </h2>
        </template>


       {{ data }}
            <img v-bind:src="image">
        {{ test }}

    </breeze-authenticated-layout>
</template>


<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated'


export default {
    components: {
        BreezeAuthenticatedLayout,
    },
    props: ['data', 'test'],
    data () {
        return {
            image: this.data
        }
    },


}
</script>

Can you add more context? Are you getting an error/can you show the code that isn't working? Are you trying to display the image in a vue component? — Andrew, Apr 16 '21 at 14:19
Yes, bro, I'm trying to display the image in a Vue component and I already edit the question bro, so I want to fetch all the images and display them in the Vue component. thanks in advance — malvin saputra, Apr 16 '21 at 15:38

score 1 · Answer 1 · answered Apr 16 '21 at 16:06

It looks like you are close, try changing your component so you are properly referencing the image with the url, assuming that your data prop contains a url referencing it via this.data in the :src attribute:

<template>
    <breeze-authenticated-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Foto Hotel
            </h2>
        </template>


       <div>
            <img :src="this.data" />
       </div>

    </breeze-authenticated-layout>
</template>


<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated'


export default {
    components: {
        BreezeAuthenticatedLayout,
    },
    props: ['data', 'test'],
    data () {
        return {
            image: this.data
        }
    },


}
</script>

How to fetch image with inertia js and spatie media library

1 Answers1