Estoy elaborando un sistema de reservas con Laravel y alpine.js. Necesito mostrar al usuario la información de los psicólogos que están disponibles para reservar la cita de acuerdo al tipo de terapia que los usuarios seleccionaron. Para eso estoy usando el evento @click para llamar a una función que vaya a consultar la tabla de psicologos en la base de datos de acuerdo al valor de la propiedad “tipo_terapia_id”.
Para consultar utilizo la función fetch que en mi caso envía un parámetro a la función controladora para buscar al terapeuta de acuerdo al parámetro seleccionado. La consulta se hace correctamente. La respuesta del controlador es retornada a la instancia de alpine, donde la coloco en un array llamado especialistas (que ahora contendrá los datos del especialista), y luego desde mi vista recorro dicho array con la etiqueta El problema es que entre los datos que necesito mostrar del especialista está una imagen que debo mostrar. Estoy intentando usar la etiqueta img de la siguiente forma pero de esa manera no me ubica la imagen en la carpeta public. Hay alguna forma de utilizar el helper asset de laravel o algo equivalente para buscar la imagen en la carpeta correcta? Les voy a dejar la función de alpine y mi parte de blade donde estoy intentando mostrar la imagen
/*Funcion de alpine.js, es llamada por el evento @click del boton "seleccionar tipo de terapia".*/
seleccionarespecialista(){
var especialistaEnTerapia= this.tipo_terapia_id;
fetch(`seleccionar_especialista/${especialistaEnTerapia}`).
then(r => r.json()).
then((data) => {
this.especialistas= data
console.log(this.especialistas[0])
}).catch()
},
/*Así intento recorrer el array para mostrar los datos del especialista incluyendo su foto*/
<template x-for="especialista in especialistas" :key="especialista.id">
<tr>
<td>
<a href="#" @click="formData.especialista='especialista.personal_info.name'">
<img :src="especialista.photo" alt=""> <!-- No localiza la imagen en la carpeta public-->
</a>
<i><h4 x-text="especialista.personal_info.name"></h4></i>
</td>
</tr>
</template>