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

В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.).

– самый простой способ (браузер сам загружает)


CSS (background-image) – если нужно фоновое изображение
.element {
background-image: url("https://example.com/image.jpg");
background-size: cover;
}

🟠`fetch()` – если нужно обработать картинку в JS
Можно загрузить изображение как Blob и создать временный URL.
fetch("https://example.com/image.jpg")
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
document.getElementById("img").src = url;
});

XMLHttpRequest – старый метод (устарел, но работает)
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";

xhr.onload = function () {
const url = URL.createObjectURL(xhr.response);
document.getElementById("img").src = url;
};

xhr.send();

🟠`` – если нужно редактировать изображение
Можно загрузить картинку и нарисовать её на .
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();

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

img.src = "https://example.com/image.jpg";

WebSocket – если изображение передаётся в реальном времени
const socket = new WebSocket("wss://example.com/socket");

socket.onmessage = function (event) {
const url = URL.createObjectURL(event.data);
document.getElementById("img").src = url;
};

data URL (Base64) – если нужно хранить изображение в тексте


Ставь 👍 и забирай 📚 Базу знаний