Встречается на собеседованиях • сегодня
Какие знаешь способы получения браузером картинки на сервере
Есть несколько основных способов загрузки изображений в браузер:
1. **`![]()
` тег** - самый простой способ:
```html
```
2. **CSS `background-image`**:
```css
div {
background-image: url('https://example.com/image.jpg');
}
```
3. **JavaScript (Fetch API)** - для динамической загрузки:
```javascript
fetch('https://example.com/image.jpg')
.then(response => response.blob())
.then(blob => {
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
});
```
4. **Canvas API** - для работы с пикселями:
```javascript
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = () => ctx.drawImage(img, 0, 0);
```
5. **WebSocket/SSE** - для потоковой передачи.
Важно учитывать кэширование, CORS, форматы (WebP/AVIF для оптимизации) и lazy loading (`loading="lazy"`).
```
2. **CSS `background-image`**:
```css
div {
background-image: url('https://example.com/image.jpg');
}
```
3. **JavaScript (Fetch API)** - для динамической загрузки:
```javascript
fetch('https://example.com/image.jpg')
.then(response => response.blob())
.then(blob => {
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
});
```
4. **Canvas API** - для работы с пикселями:
```javascript
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = () => ctx.drawImage(img, 0, 0);
```
5. **WebSocket/SSE** - для потоковой передачи.
Важно учитывать кэширование, CORS, форматы (WebP/AVIF для оптимизации) и lazy loading (`loading="lazy"`).
Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы