¿De qué maneras se puede obtener una imagen del…

Existen varias formas principales de obtener imágenes desde el servidor en el Frontend:

Etiqueta <img>: La forma más sencilla y común. Usa el atributo src para indicar la URL de la imagen.
```
<img src="/images/logo.png" alt="Logotipo de la empresa">
```

Propiedad CSS background-image: Se usa para colocar una imagen como fondo de un elemento.

.hero-section {
  background-image: url('/images/hero.jpg');
  background-size: cover;
}

AJAX (XMLHttpRequest o Fetch API): Permite obtener imágenes de forma asíncrona, a menudo para actualizar contenido dinámicamente o manipular datos de la imagen (por ejemplo, para crear vistas previas o procesamiento en el cliente). Los datos obtenidos pueden estar en varios formatos (por ejemplo, Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Obtenemos los datos como Blob
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // Creamos una URL para el Blob
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Error al cargar la imagen:', error));

Obtener imagen en formato base64:

fetch('/api/image/base64/123')
  .then(response => response.text()) // Obtenemos los datos como texto (cadena Base64)
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Ejemplo para PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Error al cargar la imagen:', error));

WebSockets: Para obtener imágenes en tiempo real, por ejemplo, en aplicaciones de streaming o juegos. Las imágenes pueden transmitirse como datos binarios.

const socket = new WebSocket('ws://localhost:8080');

socket.onmessage = (event) => {
  if (event.data instanceof Blob) {
    const img = document.createElement('img');
    img.src = URL.createObjectURL(event.data);
    document.body.appendChild(img);
  }
};

<canvas> con drawImage: Las imágenes pueden cargarse mediante AJAX o <img> y luego dibujarse en un elemento <canvas>.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = () => {
  ctx.drawImage(img, 0, 0);
};

img.src = '/images/image_for_canvas.png';

Streaming (usando ReadableStream): Para procesar imágenes grandes o transmitir imágenes por partes.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Leer y procesar el flujo de datos de la imagen
    // Por ejemplo, se puede usar TextDecoder para texto o procesar ArrayBuffer para datos binarios
  })
  .catch(error => console.error('Error en la transmisión:', error));

La elección del método depende de la tarea específica, los requisitos de rendimiento, la necesidad de carga asíncrona y el tipo de datos de la imagen.

¿De qué maneras se puede obtener una imagen del servidor?