41 Comó CARGAR las IMAGÉNES desde STORAGE con (LARAVEL y MYSQL)FULLSTACK
Duración: 8 minDescripción
🎨 Lección 41: Cómo Cargar Imágenes desde Storage con Laravel
Esta lección avanzada se centra en la presentación de datos en la tabla de listado (index), resolviendo tres problemas clave de visualización que surgieron después de registrar una película: la imagen no se muestra, la descripción muestra etiquetas HTML y el tráiler es un simple texto.
1. 📝 Renderización de HTML en la Descripción (Texto Plano) [00:27]
El problema inicial es que la descripción de la película se muestra con las etiquetas HTML (como <strong> o <i>) generadas por el editor WYSIWYG.
- El Problema: Laravel, por defecto, escapa el código HTML para prevenir ataques de Cross-Site Scripting (XSS), mostrando las etiquetas como texto.
- Solución (Renderización sin Escapado): En la vista de Blade, se reemplazan las llaves dobles de apertura ({{) por un signo de exclamación y una llave ({!!) [01:05].
- Resultado: El texto se renderiza con el formato correcto (negritas, cursivas), pero se advierte que esto debe usarse con contenido de confianza.
2. 🖼️ Carga de Imágenes desde el Directorio storage [01:49]
La imagen de portada no se carga porque la base de datos solo guarda la ruta relativa dentro del sistema de archivos de Laravel, no la URL pública completa.
- Ruta Incompleta: La etiqueta <img> solo recibe la ruta guardada (ej. portadas/uploads/nombre_encriptado.jpg), sin el dominio ni el acceso público [02:10].
Solución (Helper asset()): Se utiliza el helper de Blade asset() para construir la URL pública. La ruta completa debe apuntar a la carpeta pública generada por el comando storage:link. [02:47]
HTML
<img src="{{ asset('storage/' . $pelicula->image_p) }}" alt="Portada">
- Explicación: asset('storage/') accede al link simbólico creado en el directorio public, y luego se concatena con la ruta específica del archivo ($pelicula->image_p).
- Resultado: La imagen de portada se carga y se visualiza correctamente en la tabla de listado [03:39].
3. ▶️ Enlace al Tráiler de YouTube [04:01]
El campo del tráiler solo almacena el ID del video de YouTube, por lo que es necesario construir un enlace funcional.
- Construcción del Enlace: Se crea una etiqueta de anclaje (<a>) donde la URL se concatena con el ID del tráiler guardado en la base de datos.
- Resultado: Un botón de "Ver tráiler" funcional que redirige al video de YouTube correspondiente [05:48].
4. 🔜 Próximo Paso [07:48]
Habiendo completado las operaciones de Crear (C) y Leer (R), las siguientes lecciones se centrarán en implementar la funcionalidad de Actualizar (U) y Eliminar (D) para completar el CRUD (Create, Read, Update, Delete) del módulo de películas.
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️
