React Swiper不显示图片：cube效果下前三张幻灯片空白

错误点定位 #

结合代码逻辑，前3张幻灯片空白、文本幻灯片可正常显示的表现，与cube特效配置无关，全部由语法与配置错误触发，具体问题如下：

• JSX 标签与属性不符合 React 编写规范
  • 使用非标准的 <image> 自定义标签替代HTML原生图片标签 <img>，浏览器无法将其解析为可加载图片的元素
  • 类名绑定使用了原生HTML的 class、小写的 classname，未使用React规定的 className 属性，导致样式无法正常生效
  • 图片路径取值错误：images 数组的每一项是包含 image 字段的对象，直接将整个对象传入 src 属性，浏览器无法解析为有效图片资源路径
• Swiper 导入与配置规则不匹配
  • 现代版本的Swiper需要单独引入对应功能的样式文件，缺失基础样式会导致轮播布局完全错乱
  • 导航元素的选择器缺少类名前缀 .，配置的 nextEl: "swiper-button-next" 会被解析为标签选择器，无法匹配到对应DOM节点
• DOM结构与配置不匹配
• Swiper配置中声明了分页、导航的挂载节点，但实际渲染的DOM中缺少导航按钮的对应结构，会导致初始化过程出现隐性异常
• 实例生命周期管理缺失
• 组件卸载时未销毁已创建的Swiper实例，长期运行可能出现内存泄漏问题

修正后可正常运行的代码 #

import React from "react";
import SwiperCore, { Autoplay, EffectCube, Pagination, Navigation } from "swiper/core";
// 引入Swiper必备基础样式
import "swiper/css";
import "swiper/css/effect-cube";
import "swiper/css/pagination";
import "swiper/css/navigation";

// 统一注册用到的Swiper功能模块
SwiperCore.use([EffectCube, Autoplay, Pagination, Navigation]);

const images = [
  { image: require("./img/1.jpg") },
  { image: require("./img/2.jpg") },
  { image: require("./img/3.jpg") }
];

class Swipe extends React.Component {
  componentDidMount() {
    this.swiper = new Swiper(".swiper-container", {
      effect: "cube",
      cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
      },
      pagination: {
        el: ".swiper-pagination",
      },
      // 修正选择器格式，添加类名前缀
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      loop: true,
      grabCursor: true,
      autoplay: {
        delay: 7000,
        disableOnInteraction: true,
      },
    });
  }

  // 组件卸载时销毁Swiper实例
  componentWillUnmount() {
    if (this.swiper) {
      this.swiper.destroy(true, true);
    }
  }

  render() {
    return (
      // 类名绑定替换为React要求的className
      <div className="swiper-container">
        <div className="swiper-wrapper">
          {/* 替换为标准img标签，正确取值图片路径，使用className绑定类名 */}
          <div className="swiper-slide">
            <img className="swiper-image" src={images[0].image} alt="轮播图1" />
          </div>
          <div className="swiper-slide">
            <img className="swiper-image" src={images[1].image} alt="轮播图2" />
          </div>
          <div className="swiper-slide">
            <img className="swiper-image" src={images[2].image} alt="轮播图3" />
          </div>
          <div className="swiper-slide">SLIDE4</div>
          <div className="swiper-slide">SLIDE5</div>
        </div>
        <div className="swiper-pagination"></div>
        {/* 补全配置中声明的导航按钮DOM节点 */}
        <div className="swiper-button-next"></div>
        <div className="swiper-button-prev"></div>
      </div>
    );
  }
}

export default Swipe;

补充说明 #

完成上述修正后，前3张幻灯片的图片会被正常解析加载，cube效果也会按配置正常渲染。如果后续需要切换为普通滑动效果，只需移除 effect: "cube" 配置即可，不会再出现图片加载异常的问题。

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