react，使用swiper走马灯组件，如何引入本地图片（引入图片地址不使用网络地址）？

Question

react，swiper走马灯代码如下：

import React from 'react';
import { Space, Swiper } from 'antd-mobile';
import styles from './demo2.less';
const colors = ['red', 'yellow', 'blue', 'green'];
const items = colors.map((color, index) => (<Swiper.Item key={index}>
    <div className={styles.content} style={{ background: color }}>
      {index + 1}
    </div>
  </Swiper.Item>));
export default () => {
    return (
        <Space direction='vertical' block>
          <Swiper indicatorProps={{
            color: 'white',
        }} defaultIndex={0}>
            {items}
          </Swiper>
        </Space>
    );
};

该走马灯样式文件代码如下：

.content {
    height: 120px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    user-select: none;
    background-image: url(../Homepage/1.JPG);
  }

  .customIndicator {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    color: #ffffff;
    border-radius: 4px;
    user-select: none;
  }

请问在图片地址不能是网络地址如http开头的情况下，如何引入4张放置在homepage文件夹里的本地图片？

Answer 1

Swiper.Item 里加个 img src=“xxx路径”