React项目中背景图片无法显示问题求助

针对你遇到的问题，核心原因是React中静态资源的引用规则和普通HTML不同，加上容器尺寸设置缺失导致背景无法显示，以下是两种解决方案：

一、内联样式设置背景（JSX中） #

React中内联样式引用本地图片时，需要先导入图片资源（webpack会对其进行打包处理），同时必须给容器显式设置宽高：

import './Entrada.css';
// 根据图片实际路径导入，示例假设图片与组件同目录
import bgImage from './secoes_02.jpg';

const Entrada = () => {
  return(
    <div style={{ 
        backgroundImage: `url(${bgImage})`,
        width: '100%',
        height: '500px', // 按需调整高度
        backgroundSize: 'cover' // 可选，让背景适配容器
      }}>
        <div><img src='secoes_02.jpg'/></div>
        <div className='texto'>testatastastasta</div>
    </div>
  )
}
export default Entrada

二、CSS类设置背景 #

1. 修改组件代码，添加类名 #

import './Entrada.css';

const Entrada = () => {
  return(
    <div className='geral'>
        <div><img src='secoes_02.jpg'/></div>
        <div className='texto'>testatastastasta</div>
    </div>
  )
}
export default Entrada

2. 修正CSS中的路径并添加尺寸 #

public目录是静态资源的根路径，引用时无需添加/public前缀，同时必须设置容器宽高：

.geral{
  background: url("/img/partes/secoes_02.jpg");
  width: 100%;
  height: 500px;
  background-size: cover;
}

关键注意点 #

• 容器尺寸：如果没有给div设置宽高，容器会因内容高度不足而无法显示背景，这是最容易忽略的问题
• 路径规则：
  • JSX内联样式：必须导入图片，使用打包后的资源路径
  • CSS文件：public下的资源直接以/开头引用，无需加/public

内容的提问来源于stack exchange，提问作者Pablito