用html、css、js 代码实现多张图片没有加载成功时用一定高度占位

可以使用以下代码实现：

HTML:

<div class="image-container">
  <img class="image" src="image1.jpg" alt="Image 1">
  <img class="image" src="image2.jpg" alt="Image 2">
  <img class="image" src="image3.jpg" alt="Image 3">
</div>

CSS:

.image-container {
  display: flex;
  flex-wrap: wrap;
}

.image {
  width: 33.33%;
  height: auto;
  min-height: 100px; /* 设置最小高度 */
  object-fit: cover; /* 图片超出容器时自适应缩放 */
  background-color: #e0e0e0; /* 设置占位颜色 */
  margin-bottom: 10px;
}

JS:

const images = document.querySelectorAll('.image');

images.forEach((image) => {
  image.addEventListener('error', () => {
    image.style.display = 'none'; // 图片加载失败时隐藏图片
  });
});

这样当图片加载失败时，会显示一定高度的占位颜色，使页面布局更加美观。