De que formas é possível obter uma imagem do…

Existem várias formas principais de obter imagens do servidor no Frontend:

Etiqueta <img>: A forma mais simples e comum. Usa o atributo src para indicar a URL da imagem.
```
<img src="/images/logo.png" alt="Logotipo da empresa">
```

Propriedade CSS background-image: Usada para colocar uma imagem como fundo de um elemento.

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

AJAX (XMLHttpRequest ou Fetch API): Permite obter imagens de forma assíncrona, muitas vezes para atualizar conteúdo dinamicamente ou manipular dados da imagem (por exemplo, para criar pré-visualizações ou processamento no cliente). Os dados obtidos podem estar em vários formatos (por exemplo, Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Obtemos os dados como Blob
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // Criamos uma URL para o Blob
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Erro ao carregar a imagem:', error));

Obter imagem em formato base64:

fetch('/api/image/base64/123')
  .then(response => response.text()) // Obtemos os dados como texto (string Base64)
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Exemplo para PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Erro ao carregar a imagem:', error));

WebSockets: Para obter imagens em tempo real, por exemplo, em aplicações de streaming ou jogos. As imagens podem ser transmitidas como dados binários.

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> com drawImage: As imagens podem ser carregadas via AJAX ou <img> e depois desenhadas num 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 processar imagens grandes ou transmitir imagens por partes.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Leitura e processamento do fluxo de dados da imagem
    // Por exemplo, usar TextDecoder para texto ou processar ArrayBuffer para dados binários
  })
  .catch(error => console.error('Erro na transmissão:', error));

A escolha do método depende da tarefa específica, requisitos de desempenho, necessidade de carregamento assíncrono e do tipo de dados da imagem.

De que formas é possível obter uma imagem do servidor?