如何在react中调整图像大小、拖放图像？

import React from 'react';
import ImageResizer from 'react-image-resizer';

function App() {
  return (
    <div>
      <h1>调整图像大小示例</h1>
      <ImageResizer src="your-image.jpg" width={200} height={200} />
    </div>
  );
}

export default App;

import React from 'react';
import { useDrag, useDrop } from 'react-dnd';

function Image({ src }) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'image',
    item: { src },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }));

  const [, drop] = useDrop(() => ({
    accept: 'image',
    drop: (item) => console.log('拖放图像', item.src),
  }));

  return (
    <img
      ref={drag(drop)}
      src={src}
      style={{ opacity: isDragging ? 0.5 : 1, cursor: 'move' }}
      alt="图像"
    />
  );
}

function App() {
  return (
    <div>
      <h1>拖放图像示例</h1>
      <Image src="your-image.jpg" />
    </div>
  );
}

export default App;