当<img>不能显示时，显示一些超文本标记语言(而不是图像)

<img src="path/to/image.jpg" onerror="this.onerror=null; this.outerHTML='<p>图像加载失败</p>';">

<style>
  .image-fallback {
    position: relative;
  }
  .image-fallback::before {
    content: '图像加载失败';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center;
    line-height: 200px; /* 根据需要调整 */
  }
  .image-fallback img {
    display: block;
  }
  .image-fallback img:not([src]):not([srcset])::before,
  .image-fallback img[src=""]:not([srcset])::before,
  .image-fallback img[srcset=""]::before,
  .image-fallback img[src]:not([srcset]):onerror::before,
  .image-fallback img[srcset]:onerror::before {
    display: block;
  }
</style>

<div class="image-fallback">
  <img src="path/to/image.jpg" alt="描述性文本">
</div>

<img id="myImage" src="path/to/image.jpg" alt="描述性文本">

<script>
  document.getElementById('myImage').addEventListener('error', function() {
    this.outerHTML = '<p>图像加载失败</p>';
  });
</script>