How to fetch image with inertia js and spatie media library - laravel

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>

Answer 1

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>