如何使用惯性 js 和 spatie 媒体库获取图像答案

【问题标题】：How to fetch image with inertia js and spatie media library如何使用惯性 js 和 spatie 媒体库获取图像
【发布时间】：2021-07-10 19:45:48
【问题描述】：

所以我正在使用 spatie 媒体库，我可以将图像上传到存储和数据库。我正在尝试在一个 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>

【问题讨论】：

您可以添加更多上下文吗？您是否收到错误/您可以显示不起作用的代码吗？您是否尝试在 vue 组件中显示图像？
是的，兄弟，我正在尝试在 Vue 组件中显示图像，并且我已经编辑了问题兄弟，所以我想获取所有图像并将它们显示在 Vue 组件中。提前致谢

标签： laravel vue.js filepond inertiajs

【解决方案1】：

看起来你已经接近了，尝试更改你的组件，以便你正确地使用 url 引用图像，假设你的 data 属性包含一个通过 this.data 在 :src 属性中引用它的 url：

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

【讨论】：