在react中显示来自json数据库的图像

import React from 'react';

const ImageComponent = ({ imageUrl }) => {
  return <img src={imageUrl} alt="Image" />;
};

export default ImageComponent;

import React from 'react';
import ImageComponent from './ImageComponent';
import imageData from './data.json';

const ParentComponent = () => {
  return (
    <div>
      {imageData.map((image, index) => (
        <ImageComponent key={index} imageUrl={image.url} />
      ))}
    </div>
  );
};

export default ParentComponent;

[
  {
    "url": "https://example.com/image1.jpg"
  },
  {
    "url": "https://example.com/image2.jpg"
  },
  {
    "url": "https://example.com/image3.jpg"
  }
]

import React from 'react';
import ReactDOM from 'react-dom';
import ParentComponent from './ParentComponent';

ReactDOM.render(<ParentComponent />, document.getElementById('root'));