将一组图像映射到react组件中的图像标记

import React from 'react';
import ImageMarker from 'image-marker'; // 导入图像标记组件
import image1 from './images/image1.jpg'; // 导入图像资源
import image2 from './images/image2.jpg';
// 导入其他图像资源...

class ImageWithMarkers extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [
        { id: 1, x: 100, y: 200, text: '标记1' },
        { id: 2, x: 300, y: 150, text: '标记2' },
        // 添加其他标记...
      ]
    };
  }

  render() {
    return (
      <div>
        <img src={image1} alt="图像1" />
        <ImageMarker markers={this.state.markers} />
      </div>
    );
  }
}

class ImageMarker extends React.Component {
  render() {
    const { markers } = this.props;
    return (
      <div className="image-marker">
        {markers.map(marker => (
          <div
            key={marker.id}
            className="marker"
            style={{ left: marker.x, top: marker.y }}
          >
            {marker.text}
          </div>
        ))}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>图像标记示例</h1>
        <ImageWithMarkers />
      </div>
    );
  }
}