React Swiper 组件背景图片无法显示问题解决方案-js教程-PHP中文网

React Swiper 组件背景图片无法显示问题解决方案

碧海醫心

发布： 2025-10-21 10:27:27

原创

678人浏览过

react swiper 组件背景图片无法显示问题解决方案

本文针对 React 项目中使用 Swiper 组件时，背景图片无法从本地目录加载显示的问题，提供了详细的解决方案。通过将图片资源放置于 `public` 目录下，并使用正确的相对路径或 `PUBLIC_URL` 环境变量，可以有效解决该问题，确保背景图片能够正确加载并显示在 Swiper 组件中。

在使用 React 开发 Web 应用时，经常会用到 Swiper 这样的轮播图组件来展示内容。然而，有时会遇到背景图片无法正常显示的问题，特别是当图片存储在项目的本地目录时。本文将详细介绍如何解决 React Swiper 组件中背景图片无法显示的问题。

问题分析

当你在 React Swiper 组件中尝试使用本地目录下的图片作为背景时，可能会遇到图片无法加载的情况。这通常是由于以下原因：

路径问题： React 应用的打包机制可能会导致你使用的相对路径不正确。
资源访问限制： src 目录下的资源通常会被 webpack 处理，直接在 CSS 或内联样式中使用相对路径可能无法正确解析。

解决方案

解决此问题的关键在于将图片资源放置在 public 目录下，并使用正确的路径引用它们。public 目录下的文件不会被 webpack 处理，而是直接复制到构建后的输出目录中，因此可以通过相对路径直接访问。

步骤 1：移动图片资源

将你的图片资源（例如 images/img_1.jpg 和 images/person_1.jpg）从 src 目录移动到 public 目录下。如果 public 目录下没有 images 文件夹，需要手动创建。

步骤 2：修改图片路径

在你的 React 组件中，修改图片路径的引用方式。有两种常用的方法：

方法一：使用相对路径

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

直接使用相对于 public 目录的相对路径。例如：

<img src="/images/person_1.jpg" alt="author" />

登录后复制

和

<div
  className="a-block d-flex align-items-center height-lg"
  style={{
    backgroundImage: "url('/images/img_1.jpg')"
  }}
>

登录后复制

方法二：使用 PUBLIC_URL 环境变量

使用 process.env.PUBLIC_URL 环境变量来构建图片路径。PUBLIC_URL 是 Create React App 预定义的环境变量，它指向 public 目录的路径。

<img src={process.env.PUBLIC_URL + "/images/person_1.jpg"} alt="author" />

登录后复制

和

<div
  className="a-block d-flex align-items-center height-lg"
  style={{
    backgroundImage: `url(${process.env.PUBLIC_URL + "/images/img_1.jpg"})`
  }}
>

登录后复制

修改后的代码示例

以下是修改后的代码示例，使用了 PUBLIC_URL 环境变量：

<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(${process.env.PUBLIC_URL + "/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={process.env.PUBLIC_URL + "/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>

登录后复制

注意事项