Laravel 如何利用惯性js和空间媒体库获取图像

所以我使用空间媒体库，我可以上传图像到存储和数据库。我尝试在vue组件中显示多个图像。这是我的控制器

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

这是我的vue组件，我已经成功获取了图像URL，但只有一个图像URL。在我的例子中，我需要显示数据库中的所有媒体

<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>

福托酒店
{{data}}
{{test}}
从“@/Layouts/authenticatedLayout”导入BreezeAuthenticatedLayout
导出默认值{
组成部分：{
BreezeAuthenticatedLayout，
},
道具：[“数据”，“测试”]，
数据（）{
返回{
图：这是一个数据
}
},
}

看起来您很接近了，请尝试更改组件，以便正确引用带有url的图像，假设您的

数据

道具包含一个通过

此引用图像的url。
:src
属性中的数据
：

<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>


福托酒店
从“@/Layouts/authenticatedLayout”导入BreezeAuthenticatedLayout
导出默认值{
组成部分：{
BreezeAuthenticatedLayout，
},
道具：[“数据”，“测试”]，
数据（）{
返回{
图：这是一个数据
}
},
}
您可以添加更多上下文吗？您是否遇到错误/能否显示不起作用的代码？您正在尝试在vue组件中显示图像吗？是的，兄弟，我正在尝试在vue组件中显示图像，我已经编辑了问题兄弟，因此我想获取所有图像并在vue组件中显示它们。提前谢谢