react not showing from images from props on cards

Question

Sorry am a newbie to ReactJS. Am trying to load images from MainContent to Cards from PROPS to but unsuccessful for couple of days

MainContent.js

import react from "react";
import reactDom from "react-dom";
import '../css/styles.css'
import Cards from './Cards'

export default function MainContent(){

return(
     <div>
        <Cards ximg= "/images/stays/1.jpg"  alt="Enthralling Escapes Manali" xhead="Windflower Condo Manali"/>
        <Cards ximg= './images/stays/Enthralling-Escapes-Manali.jpg' alt="Enthralling Escapes Manali" xhead="Windflower Condo Manali" />
        <Cards ximg= "../images/stays/Lonchenpa-Manali.jpg" alt="Lonchenpa-Manali" xhead="Lonchenpa Manali" />
        <Cards ximg= "../images/stays/The-Abode-Shobla-Pine-Chalet.jpg" alt="The-Abode-Shobla-Pine-Chalet" xhead="The Abode Shobla Pine Chalet" />
        <Cards ximg= "../images/stays/The-Warehouse-Gadherni-Himachal-Pradesh.jpg" alt="The-Warehouse-Gadherni-Himachal-Pradesh" xhead="The Warehouse Gadherni Himachal Pradesh" />
        <Cards ximg= "../images/stays/Windflower-Condo-Manali.jpg" alt="Windflower-Condo-Manali" xhead="Windflower Condo Manali" />
    </div>
    )
}

here is my --- Cards.js

import React, {Component} from 'react';
import reactDom from "react-dom";

export default function Cards(props){
const url = 'http://localhost:3000/images/stays/';
return(
    <section>
        <div className='xcards'>
            <h3>{props.xhead}</h3>
            <img src={props.ximg} alt={props.alt} />
        </div>
    </section>
    )
}

The other data like ALT and XHEAD are visible but only images are not showing up

thank you in advance to everyone reading my question

Answer 1

the image paths are not valid inside Card component, use absolute or relative path or just send the image name as prop and create the path inside Card