使用antd实现轮播图时遇到的src问题

项目场景:

使用antd实现轮播图时遇到的src问题


问题描述

在使用antd实现轮播图的时候发现了这样一个问题:

起初我使用Image组件时, <Image src={"../../../images/penuins1.jpg"} /> 发现图片显示不出来

(这个问题暂时没有找到原因,如果有知道的欢迎评论区指出)

于是修改引入图片路径的方法使用了<Image src={require("../../../images/penuins1.jpg")} /> 这时图片可以正常显示。

但由于我想同时显示多个图片,写多个Image组件显得代码重复,于是我想通过map的方式遍历所有图片路径。

但当我使用map对图片的路径遍历时报了以下错误:

        Cannot find module '../../../images/penuins1.jpg'

export default function HomePageShow() {
  const images = [
    '../../../images/penuins1.jpg',
    '../../../images/penuins2.jpg',
    '../../../images/penuins3.jpg',
    '../../../images/penuins4.jpg',
    '../../../images/penuins5.jpg',
  ]
  return (
    <div className="home_show">
      <div className="scrollImg">
        <Carousel autoplay>
          {images.map((image, index) => (
            <div key={index}>
              <Image src={require(image)} />
            </div>
          ))}
        </Carousel>
      </div>
    </div>
  )
}


原因分析:

require需要静态的字符串作为参数,以便静态的构建分析

在 JSX 或 TSX 文件中,由于require需要静态字符串作为参数,因此无法直接在map函数中使用变量路径。

代码中image 是一个变量,不是静态字符串,所以构建工具(如 Webpack)无法处理它。


解决方案:

通过直接import的方式,不是用require

import penuins1 from '../../../images/penuins1.jpg';  
import penuins2 from '../../../images/penuins2.jpg';  
import penuins3 from '../../../images/penuins3.jpg';  
import penuins4 from '../../../images/penuins4.jpg';  
import penuins5 from '../../../images/penuins5.jpg';  
  
export default function HomePageShow() {  
  const images = [  
    penuins1,  
    penuins2,  
    penuins3,  
    penuins4,  
    penuins5,  
  ];  
  

//其余代码...

}

可以使用require.context

// 使用require.context来创建一个函数,该函数可以动态地解析图片路径  
const imagesContext = require.context('../../../images', true, /\.jpg$/);  
  
export default function HomePageShow() {  
  const images = [  
    'penuins1.jpg',  
    'penuins2.jpg',  
    'penuins3.jpg',  
    'penuins4.jpg',  
    'penuins5.jpg',  
  ];  
  
  return (  
    <div className="home_show">  
      <div className="scrollImg">  
        <Carousel autoplay>  
          {images.map((imageName, index) => {  
            // 使用imagesContext函数动态地获取图片模块  
            const imageModule = imagesContext('./' + imageName);  
            return (  
              <div key={index}>  
                {/* 使用imageModule.default来访问图片的URL */}  
                <Image src={imageModule.default} alt={`Image ${index + 1}`} />  
              </div>  
            );  
          })}  
        </Carousel>  
      </div>  
    </div>  
  );  
}

  • 11
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd使用swiper实现的上下切换步骤如下: 1. 安装Swiper插件 在终端或命令行中使用npm或yarn安装swiper插件: ``` npm install swiper或yarn add swiper ``` 2. 引入Swiper插件 在需要使用swiper的组件中引入swiper插件: ```js import Swiper from 'swiper'; import 'swiper/swiper-bundle.css'; ``` 3. 初始化Swiper 在组件的生命周期函数中初始化Swiper: ```js componentDidMount() { new Swiper('.swiper-container', { direction: 'vertical', // 垂直方向轮 loop: true, // 循环轮 autoplay: true, // 自动轮 }); } ``` 4. 编写轮 在组件中编写轮的HTML结构: ```jsx <div className="swiper-container"> <div className="swiper-wrapper"> <div className="swiper-slide">轮1</div> <div className="swiper-slide">轮2</div> <div className="swiper-slide">轮3</div> </div> </div> ``` 其中,`.swiper-container`表示轮容器,`.swiper-wrapper`表示轮的包裹层,`.swiper-slide`表示每个轮项。 5. 设置样式 设置轮的样式,例如: ```css .swiper-container { height: 300px; } .swiper-slide { background-color: #ccc; height: 300px; display: flex; justify-content: center; align-items: center; } ``` 其中,`.swiper-container`的高度需要设置为轮的高度,`.swiper-slide`需要设置高度和居中样式。 6. 实现的上下切换 在初始化Swiper,设置`direction: 'vertical'`表示垂直方向轮,即可实现的上下切换。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值