Для исправления ситуации, когда блок не имеет размера при загрузке картинки, можно использовать следующие подходы:
1. Установить размеры блока заранее: задать фиксированную ширину и высоту блока в CSS. Например, используя свойства width и height.
```css
.block {
width: 300px;
height: 200px;
}
```
2. Использовать псевдоэлементы для задания плейсхолдера: создать псевдоэлемент с нужными размерами и фоновым цветом, который будет отображаться до загрузки изображения.
```css
.block::before {
content: '';
display: block;
width: 300px;
height: 200px;
background-color: #f3f3f3;
}
```
3. Использовать атрибуты width и height в теге <img>: установить размеры изображения прямо в HTML.
```html
<div class="block">
<img src="img.jpg" width="300" height="200" alt="Image">
</div>
```
4. Загружать изображение через JavaScript и задавать размеры блока после загрузки: использовать событие onload для изображения и изменить размеры блока после успешной загрузки.
```html
<div class="block">
<img src="img.jpg" alt="Image" id="image">
</div>
<script>
const image = document.getElementById('image');
image.onload = function() {
const block = document.querySelector('.block');
block.style.width = image.width + 'px';
block.style.height = image.height + 'px';
};
</script>
```
Выбор конкретного подхода зависит от требований к дизайну и функциональности сайта.