🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Какими способами мы можем получить картинку с сервера?
В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.).
– самый простой способ (браузер сам загружает)
CSS (background-image) – если нужно фоновое изображение
.element {
background-image: url("Ссылка скрыта
background-size: cover;
}
🟠`fetch()` – если нужно обработать картинку в JS
Можно загрузить изображение как Blob и создать временный URL.
fetch("Ссылка скрыта
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
document.getElementById("img").src = url;
});
XMLHttpRequest – старый метод (устарел, но работает)
const xhr = new XMLHttpRequest();
xhr.open("GET", "Ссылка скрыта 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 = "Ссылка скрыта
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) – если нужно хранить изображение в тексте
Ставь 👍 и забирай 📚 Базу знаний