Image not showing from Django rest api in Reactjs

data i’ve got from server:

[
    {
        "id": 29,
        "name": "atlas",
        "image": "/media/images/images-4.jpeg",
        "price": 67473,
    },
]

in React:

//...code
console.log(this.props.img); //>>> /media/images/images-4.jpeg
//...code
<img src={this.props.img} alt='image' width='100%'/>
//...

in Django:

I think there is no problem in django. I made a template and tried to show image, and it worked.

So, how do I show image in React ?

Answer

Api returning only path of image .so append base url before image link like below

<img src="https://urdomain.com{this.props.img}" alt='image' width='100%'/>

or in django you have to send full url in image value like below

[
    {
        "id": 29,
        "name": "atlas",
        "image": "https://urdomain.com/media/images/images-4.jpeg",
        "price": 67473,
    },
]

so no need to append base url

 <img src="{this.props.img}" alt='image' width='100%'/>