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

编程问答 2022-05-11

问题描述

所以我正在使用 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>

解决方法

看起来您已经接近了，请尝试更改您的组件，以便您正确地使用 url 引用图像，假设您的 data 道具包含一个通过 {{1} 中的 this.data 引用它的 url }} 属性：

:src
filepondinertiajslaravellaravelvue.js