我正在使用 Spatie 媒体库,我可以将图像上传到存储和数据库。我正在尝试在 Vue 组件中显示媒体集合。这是我的控制器:
public function showHotelPhoto($id)
{
$hotel = Hotel::with('media');
return Inertia::render('AdminHotelPhoto', [
'data' => $hotel,
]);
}
这是我的 Vue 组件:
<template>
<breeze-authenticated-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Foto Hotel
</h2>
</template>
@foreach ($hotel as $hotels)
@foreach ($hotels->getMedia('property_images') as $image)
<div class="-item">
<img src="{{ asset($image->getUrl()) }}">
</div>
@endforeach
@endforeach
</breeze-authenticated-layout>
</template>
<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated'
export default {
components: {
BreezeAuthenticatedLayout,
},
props: ['data'],
}
</script>
我知道使用@foreach
会引发错误,但这仅用于说明。我想在 Vue 组件中循环获取媒体集合。