Mostrar imágenes en la web

La web soporta el widget estándar Image y la clase más avanzada dart:ui/Image (donde se necesita un control más detallado para mostrar imágenes). Sin embargo, dado que los navegadores web están diseñados para ejecutar código no confiable de forma segura, existen ciertas limitaciones en lo que puedes hacer con las imágenes en comparación con las plataformas móviles y de escritorio. Esta página explica estas limitaciones y ofrece formas de sortearlas.

La web ofrece varios métodos para mostrar imágenes:

• Los elementos HTML integrados <img> y <picture>
• El método drawImage en el elemento <canvas>
• Códec de imagen personalizado que renderiza en un canvas de WebGL

Cada opción tiene sus propias ventajas y desventajas. Por ejemplo, los elementos integrados encajan muy bien entre otros elementos HTML, aprovechan automáticamente la caché del navegador, la optimización de imágenes integrada y la gestión de memoria. Te permiten mostrar imágenes de fuentes arbitrarias de forma segura (más sobre esto en la sección de CORS de abajo). drawImage es genial cuando la imagen debe encajar dentro de otro contenido renderizado usando el elemento <canvas>. También obtienes control sobre el tamaño de la imagen y, cuando la política CORS lo permite, leer los píxeles de la imagen para su posterior procesamiento. Por último, WebGL te da el mayor grado de control sobre la imagen. No solo puedes leer los píxeles y aplicar algoritmos de imagen personalizados, sino que también puedes usar GLSL para la aceleración por hardware.

CORS es un mecanismo que los navegadores utilizan para controlar cómo un sitio accede a los recursos de otro sitio. Está diseñado de tal manera que, por defecto, un sitio web no tiene permitido realizar solicitudes HTTP a otro sitio usando XHR o fetch. Esto evita que los scripts en otro sitio actúen en nombre del usuario y obtengan acceso a los recursos de otro sitio sin permiso.

En la web, Flutter renderiza las aplicaciones usando los renderizadores CanvasKit o skwasm (cuando se usa Wasm). Ambos dependen de WebGL. WebGL requiere acceso a los datos brutos de la imagen (bytes) para poder renderizarla. Por lo tanto, las imágenes solo deben provenir de servidores que tengan una política CORS configurada para funcionar con el dominio que sirve tu aplicación.

Existen múltiples soluciones para sortear las restricciones de CORS en Flutter.

Si la aplicación tiene los bytes de la imagen codificada en memoria, provistos como un asset, o almacenados en el mismo servidor que sirve la aplicación (también conocido como same-origin), no es necesario ningún esfuerzo adicional. La imagen se puede mostrar usando Image.memory, Image.asset, o Image.network.

Normalmente, las redes de entrega de contenido (CDN) se pueden configurar para personalizar qué dominios tienen permitido acceder a tu contenido. Por ejemplo, el alojamiento de sitios de Firebase permite especificar una cabecera Access-Control-Allow-Origin personalizada en el archivo firebase.json.

Si el servidor de imágenes no se puede configurar para permitir solicitudes CORS desde tu aplicación, es posible que aún puedas cargar imágenes enviando las solicitudes a través de un servidor proxy. Esto requiere que el servidor intermedio tenga el acceso suficiente para cargar las imágenes.

Este método se puede utilizar en situaciones en las que el servidor de imágenes original sirve imágenes públicamente, pero no está configurado con las cabeceras CORS correctas.

Ejemplos:

• Usando CloudFlare Workers.
• Usando Firebase Functions.

Si ninguna de las otras soluciones funciona para tu aplicación, Flutter soporta la incrustación de HTML puro dentro de la aplicación usando HtmlElementView. Úsalo para crear un <img> elemento para renderizar la imagen desde otro dominio.