如何在图片上添加文字？现有React代码实现失败求助

开发者阿泽

2026-8-16

在图片上叠加文字的实现方案

你的代码存在几个问题导致无法在图片上添加文字，这里给出修复方案：

问题分析

图片与文字属于独立的DOM元素，没有被包裹在同一个容器中，无法实现叠加效果
渲染文字的movies.map回调中没有返回JSX元素，导致文字无法正常渲染
类名拼写错误：samllPoster 应为 smallPoster

修改后的代码

<div className='row'>
  <h2>{props.title}</h2>

  <div className="posters">
    {movies.map((obj) => (
      // 用容器包裹图片和对应文字
      <div key={obj.id} className="poster-container">
        <img 
          onClick={() => handleMovie(obj.id)} 
          className={props.isSmall ? "smallPoster" : "poster"} 
          src={`${imageUrl + obj.poster_path}`} 
          alt={obj.title}
        />
        {/* 叠加在图片上的文字 */}
        <div className="poster-overlay">
          <h3>{obj.title}</h3>
          <p>{obj.overview || "暂无简介"}</p>
        </div>
      </div>
    ))}
  </div>
</div>

配套CSS样式

需要通过定位实现文字叠加在图片上方：

.poster-container {
  position: relative;
  display: inline-block; /* 保持图片横向排列 */
  margin: 0 8px;
}

.poster, .smallPoster {
  display: block;
  width: auto;
  height: auto;
}

.poster-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7); /* 半透明背景增强可读性 */
  color: white;
  padding: 8px;
  overflow: hidden;
}

.poster-overlay h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.poster-overlay p {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
}