React中Swiper无法加载本地目录背景图问题求助

我尝试将项目本地名为“images”的目录中的图片作为Swiper轮播组件的背景图使用，但图片无法显示，仅能看到文字内容。文字本应叠加在图片上方并随图片一起轮播。以下是我的代码：

<section className="site-section pt-5 pb-5">
  <div className="container">
    <div className="row">
      <div className="col-md-12">
        <Swiper
          spaceBetween={30}
          centeredSlides={true}
          autoplay={{
            delay: 2500,
            disableOnInteraction: false
          }}
          pagination={{
            clickable: true
          }}
          navigation={true}
          modules={[Autoplay, Pagination, Navigation]}
          className="mySwiper"
        >
          <SwiperSlide>
            <a
              href="blog-single.html"
              className="a-block d-flex align-items-center height-lg"
              style={{
                backgroundImage: "url('src/images/img_1.jpg')"
              }}
            >
              <div className="text half-to-full">
                <span className="category mb-5">Cybersecurity</span>
                <div className="post-meta">
                  <span className="author mr-2">
                    <img src="src/images/person_1.jpg" alt="author" />
                    Sneid{' '}
                  </span>
                  {'. '}
                  <span className="mr-2">June 20, 2022 </span>
                  {'. '}
                  <span className="ml-2">
                    <span>
                      <CommentIcon sx={{ fontSize: 14 }} />
                    </span>
                    {' 3'}
                  </span>
                </div>
                <h3>How to protect yourself in the cyber world</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit. Quidem nobis, ut dicta eaque ipsa laudantium!
                </p>
              </div>
            </a>
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  </div>
</section>

解决方法 #

• 修正资源引用路径
  React项目中直接使用src/images/img_1.jpg作为背景图路径，打包后会因为资源位置变化失效。可以用两种方式解决：

  1. 先导入图片再使用：

     // 根据当前组件文件位置调整相对路径
     import bgImage from './images/img_1.jpg';
     
     // 在style中引用
     style={{ backgroundImage: `url(${bgImage})` }}
     

  2. 如果图片放在项目的public目录下（如public/images），直接用绝对路径：

     style={{ backgroundImage: "url('/images/img_1.jpg')" }}
     

• 补充背景图显示样式
  确保背景图能正确渲染，需要添加必要的背景样式属性，同时保证容器有足够高度：

  style={{
    backgroundImage: `url(${bgImage})`,
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center'
  }}
  

• 验证图片文件有效性
  检查图片是否存在于指定目录，文件名、后缀（如jpg/png）是否正确，注意系统对文件名大小写的敏感性。

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