laravel - 使用惯性js获取媒体集合spatie媒体库

Question

我正在使用 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 组件中循环获取媒体集合。

Answer 1

您应该使用 v-for 而不是 @foreach。当你说媒体时，媒体作为数组返回。您可以使用目录中的 original_url 参数访问图像的路径。