How pass image as props in React?

Question

How pass image as props? src={}

inside src not intercept as props

In Card.js I have two type props. either type props originate from data.js objects properties(image) and other type I add separately(text,switch).

(I public this without css.)

data.js database Component

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 Parent component

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 Child Component

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;

Answer 1

The key part:

  <img src={require(`../../assets/${data[counter].image}.jpg`)} />