Существует несколько основных способов получения изображений с сервера во Frontend:

Тег <img>: Самый простой и распространенный способ. Использует атрибут src для указания URL изображения.
```
<img src="/images/logo.png" alt="Логотип компании">
```
CSS свойство background-image: Используется для размещения изображения в качестве фона элемента.
```
.hero-section {
  background-image: url('/images/hero.jpg');
  background-size: cover;
}
```

AJAX (XMLHttpRequest или Fetch API): Позволяет получать изображения асинхронно, часто для динамического обновления контента или манипуляций с данными изображения (например, для создания превью или обработки на клиенте). Полученные данные могут быть в различных форматах (например, Base64).

fetch('/api/image/123')
  .then(response => response.blob()) // Получаем данные как Blob
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob); // Создаем URL для Blob
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Ошибка загрузки изображения:', error));

Получение изображения в формате base64:

fetch('/api/image/base64/123')
  .then(response => response.text()) // Получаем данные в виде текста (Base64 строка)
  .then(base64String => {
    const img = document.createElement('img');
    img.src = 'data:image/png;base64,' + base64String; // Пример для PNG
    document.body.appendChild(img);
  })
  .catch(error => console.error('Ошибка загрузки изображения:', error));

WebSockets: Для получения изображений в реальном времени, например, в стриминговых приложениях или играх. Изображения могут передаваться как бинарные данные.
```
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> с drawImage: Изображения могут быть загружены через AJAX или <img> и затем отрисованы на элементе <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 (с использованием ReadableStream): Для обработки больших изображений или передачи изображений по частям.

fetch('/large-image-stream')
  .then(response => response.body)
  .then(reader => {
    // Чтение и обработка потока данных изображения
    // Например, можно использовать TextDecoder для текста или обрабатывать ArrayBuffer для бинарных данных
  })
  .catch(error => console.error('Ошибка потоковой передачи:', error));

Выбор способа зависит от конкретной задачи, требований к производительности, необходимости асинхронной загрузки и типа данных изображения.

Какими способами можно получить изображение с сервера?