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

可以使用以下的代码实现：

HTML:

<div class="image-placeholder">
  <img src="path/to/image" alt="Image">
</div>

CSS:

.image-placeholder {
  width: 100%;
  height: 300px; /* 设置占位高度 */
  background-color: #f5f5f5; /* 设置占位背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-placeholder img {
  display: none;
}

JS:

const img = document.querySelector('.image-placeholder img');

img.addEventListener('load', () => {
  img.style.display = 'block';
});

img.addEventListener('error', () => {
  // 加载失败处理
});

以上代码的思路是：先使用一个占位 div 来占据图片的位置，并设置好高度与背景颜色，然后将图片设置为不可见，当图片加载成功时，再将其显示出来。如果图片加载失败，则可以在 error 事件中进行处理。