如何解决如何使用惯性 js 和 spatie 媒体库获取图像
所以我正在使用 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。