如何在React中将图像作为道具传递？

Question

如何将图像作为道具？ src = {}

内部src不能作为道具拦截

在Card.js中 我有两种类型的道具。两种类型的道具都源自data.js对象的属性（图像），而其他类型的我分别添加（文本，开关）。

（我公开此内容时没有CSS。）

data.js数据库组件

import React, { Component } from 'react';

const data = {
    "properties": [
    {
        "_id": "fsdfsd23r42133er12",
        "index": 0,
        "image":"WebPage1",     
    },
    {
        "_id": "fsdfsd23r42133er13",
        "index": 1,
        "image":"WebShop1", 
    },
    {
        "_id": "fsdfsd23r42133er14"
        "index": 2,
        "kep":"Development1", 
    },
  
    ]
}

export default data;

Slider.js父组件

import React, { Component } from 'react';
import data from '../../data/data';
import Card  from './Card';
import ArrowRight from '../../assets/Card/ArrowRight.PNG';
import ArrowLeft from '../../assets/Card/ArrowLeft.PNG';
import Webpage1 from '../../assets/Ajanlas/Jo/WebPage500.jpeg'
import WebShop1 from '../../assets/Ajanlas/Jo/WebShop500.jpeg';
import Development1 from '../../assets/Ajanlas/Jo/Development500.jpeg';

class Slider extends Component {
  constructor(props){
    super(props);
    this.state = {
    properties: data.properties,
    property: data.properties[0],
    switch:false,
    }
  }
  
    nextProperty = () => {
    const newIndex = this.state.property.index+1;
    this.setState({
      property: data.properties[newIndex],     
    })
    }
    
    prevProperty = () => {
    const newIndex = this.state.property.index-1;
    this.setState({
      property: data.properties[newIndex],     
    })
  }

  render() {

    const {properties, property} = this.state;
    return (    
      <div>
            <button 
              onClick={() => this.prevProperty()} 
            </button>
            
            <button 
              onClick={() => this.nextProperty()}     
           </button>           
       </div>

      <div>   
               <div>                
                 {properties.map(property => <Card  key={property._id} property={property}
                 image={image}
                 text="Some text"
                 switch={this.state.switch}
                 }
               </div>     
      </div>
     
    );
  }
}

export default Slider;

Card.js子组件

import React from 'react';
import PropTypes from 'prop-types';
import Webpage1 from '../../assets/Ajanlas/Jo/WebPage500.jpeg'
import WebShop1 from '../../assets/Ajanlas/Jo/WebShop500.jpeg';
import Development1 from '../../assets/Ajanlas/Jo/Development500.jpeg';

const Card = ({property, text, switch}) => {
    const {index, image} = property;

    return (
              <div>
                   {text}  
                   {switch}
                   <img src={image} alt='WebPage'/>  
               </div>                  
    )
}

Card.propTypes = {
    property: PropTypes.object.isRequired,
    switch: PropTypes.string.isRequired,
    image: PropTypes.string.isRequired,
}

export default Card;