1

私はspatieメディアライブラリを使用しており、画像をストレージとデータベースにアップロードできます。そして、vue コンポーネントに複数の画像を表示しようとしています。これが私のコントローラーです。

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

そして、これは私の vue コンポーネントであり、画像 URL のフェッチにはすでに成功していますが、画像 URL は 1 つだけです。私の場合、データベースからすべてのメディアを表示する必要があります。

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

1 に答える 1