Why ReactJs says the link or path is broken when I put it in Card.img#src?

Question

I'm using ReactJs-bootstrap and I have a Card that has image inside of it.

inside the Card there is <Card.Img> tag that I imported form ReactJs-bootstrap.

the Card.Img there has attribute 'src'. when I try to change the 'src' it does the broken picture as if the path is wrong.

I tried to search for answers but I couldn't find any that has this problem with React-bootstrap

{* the relative path of the image is 'MainAppDict / src / images / rfm.jpg}

My Card Component:

import React, { Component } from 'react'

import {Accordion, Card, Button} from  'react-bootstrap/dist/react-bootstrap'

export default class ProductCardComponent extends Component{
constructor(props) {
    super(props)

}
render() {
    return (
        <div>
            <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src="../../images/rfm.jpg" />
             {*** the relative path of the image is 'MainAppDict/src/images/rfm.jpg**}
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                Some quick example text to build on the card title and make up the bulk of
                the card's content.
                </Card.Text>
            </Card.Body>

                <Accordion defaultActiveKey="0">
                    <Card>
                        <Card.Header>
                        <Accordion.Toggle as={Button} variant="link" eventKey="0">
                            Click me!
                        </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="0">
                        <Card.Body>some text</Card.Body>
                        </Accordion.Collapse>
                    </Card>
                    <Card>
                        <Card.Header>
                        <Accordion.Toggle as={Button} variant="link" eventKey="1">
                            Click me!
                        </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="1">
                        <Card.Body>Hello! I'm another body</Card.Body>
                        </Accordion.Collapse>
                    </Card>
                    <Card>
                        <Card.Header>
                        <Accordion.Toggle as={Button} variant="link" eventKey="1">
                            Click me!
                        </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="1">
                        <Card.Body>Hello! I'm another body</Card.Body>
                        </Accordion.Collapse>
                    </Card>
                </Accordion>


            <Card.Body>
                <Card.Link href="#">Card Link</Card.Link>
                <Card.Link href="#">Another Link</Card.Link>
            </Card.Body>
            </Card>



            {/* <Accordion defaultActiveKey="0">
                <Card>
                    <Card.Header>
                    <Accordion.Toggle as={Button} variant="link" eventKey="0">
                        Click me!
                    </Accordion.Toggle>
                    </Card.Header>
                    <Accordion.Collapse eventKey="0">
                    <Card.Body>Hello! I'm the body</Card.Body>
                    </Accordion.Collapse>
                </Card>
                <Card>
                    <Card.Header>
                    <Accordion.Toggle as={Button} variant="link" eventKey="1">
                        Click me!
                    </Accordion.Toggle>
                    </Card.Header>
                    <Accordion.Collapse eventKey="1">
                    <Card.Body>Hello! I'm another body</Card.Body>
                    </Accordion.Collapse>
                </Card>
            </Accordion> */}
        </div>
    )
}

}

Answer 1

Depending on your project setup, this might be different, but most likely you need to import the image first.

import imageUrl from '../../images/rfm.jpg';

If you are using webpack with appropriate loaders (like file-loader, etc), the value of imageUrl will automatically be the path to the image after you build your app. Therefore, you can just use the value as such:

<Card.Img variant="top" src={imageUrl} />