如何在图片无法显示时用含background image与书名的<div>替代

AI 小北

2026-8-24

解决方案

可以通过图片的onerror事件结合CSS显示控制实现需求：初始隐藏替代用的<div>，当封面图片加载失败时，触发事件隐藏原图片、显示带背景和书名的替代容器。

实现步骤

1. 调整HTML结构

给原图片添加onerror事件处理，同时给替代div设置初始隐藏的类：

<a href="#popup1">
  <img 
    src="uploadimages/<?=$image['image']?>" 
    alt="<?=$image['titre']?>"
    onerror="this.classList.add('hidden'); this.nextElementSibling.classList.remove('hidden');"
  />

  <div class="altimage hidden">
    <div class="alttitle"><?=$image['titre']?></div>
  </div>
</a>

2. 配置CSS样式

确保替代容器和图片布局一致，同时实现背景图和文字排版：

/* 让a标签作为定位容器，确保替代div和图片重合 */
a[href="#popup1"] {
  position: relative;
  display: inline-block;
  /* 设置和图书封面一致的固定宽高，避免布局跳动 */
  width: 220px;
  height: 320px;
  overflow: hidden;
}

/* 初始隐藏类 */
.hidden {
  display: none;
}

/* 替代容器样式：背景图+居中书名 */
.altimage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('uploadimages/couvalt.png');
  background-size: cover;
  background-position: center;
  /* 让书名居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
}

/* 书名样式，提升可读性 */
.alttitle {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 0 4px rgba(0,0,0,0.9);
  line-height: 1.4;
}