CODEWITHSUNDEEP
javascriptpythonreactjsdjangodjango-rest-framework
Asif Biswas
Asif Biswas

Reputation: 171

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 ?

Upvotes: 0

Views: 910

Answers (2)

cool_code
cool_code

Reputation: 208

You have to add you domain to the image path


const BASE_URL = "your base here" 

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

Upvotes: 1

John Lobo
John Lobo

Reputation: 15319

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%'/>

Upvotes: 1

Related Questions