I'm having an error with vue.js and laravel but I can't figure out how can I get this array/object inside coded in a nutshell I connected to the room the instance photos via the has many of laravel and the output in the api call is like this :

I would like to just get the name from inside photos and then bring it into the frontend but every time I do that it tells me undefined as if I'm doing wrong method of entry.

Code frontend :

 <div class="col-md-3" v-for="(room, index) in rooms" :key="index">
                <div class="card mb-3 border-0">
                    **<img :src="'/img/rooms/'+room.photos.name" class="card-img-top br0" :alt="room.photos.name">**
                    
                    <p class="small text-uppercase pb-0">{{ room.listing_name }}</p>
                    <div class="card-body p-0">

                        <h5 class="card-title">{{ room.listing_name }}</h5>
                        <p class="card-text m-0">${{ room.price }}/night</p>
                        <p class="small m-0 text-info">&#9733;&#9733;&#9733;&#9733;&#9733;
                        <span class="text-secondary"> {{ index }}, Superhost</span></p>
                    </div>
                </div>
            </div>