ReactJS中backgroundImage使用问题：如何从public文件夹加载图片？

你的问题出在图片路径的写法上，public作为项目的静态资源根目录，引用其中的文件需要以/开头，否则会按照相对当前组件的路径去查找，自然找不到public里的图片。

给你两种可行的修改方式：

方式一：直接使用根路径引用 #

直接在路径前加上/，让浏览器从项目根目录（也就是public文件夹）开始查找：

<div className="slider-item" style={{backgroundImage: 'url(/images/bg_1.jpg)'}}>
      <div className="overlay" />
      <div className="container">
        <div className="row no-gutters slider-text align-items-center justify-content-center">
          <div className="col-md-12 ftco-animate text-center">
            <div className="text mb-5 pb-3">
              <h1 className="mb-3">Welcome To Furama</h1>
              <h2>Hotels & Resorts</h2>
            </div>
          </div>
        </div>
      </div>
    </div>

方式二：使用process.env.PUBLIC_URL（更稳妥的部署兼容写法） #

如果你的项目需要部署到非根域名路径下，推荐用React提供的process.env.PUBLIC_URL来拼接路径，它会自动适配项目的部署根路径：

<div className="slider-item" style={{backgroundImage: `url(${process.env.PUBLIC_URL}/images/bg_1.jpg)`}}>
      <div className="overlay" />
      <div className="container">
        <div className="row no-gutters slider-text align-items-center justify-content-center">
          <div className="col-md-12 ftco-animate text-center">
            <div className="text mb-5 pb-3">
              <h1 className="mb-3">Welcome To Furama</h1>
              <h2>Hotels & Resorts</h2>
            </div>
          </div>
        </div>
      </div>
    </div>

另外要注意：

• 确认public文件夹下确实存在images/bg_1.jpg，路径和文件名（包括大小写）要完全匹配，部分服务器环境（如Linux）是区分大小写的
• 不要把public里的资源用import引入，直接通过路径引用即可

内容的提问来源于stack exchange，提问作者Hải Thành