How to GET image in reactjs from api?
Solution 1
I was able to render images from a backend call in React using a pattern similar to this using: react hooks
, axios
, and URL.createObjectURL
I used the URL.createObjectURL(blob)
method and used the axios configuration { responseType: 'blob' }
to make sure the the data type would fit.
const ImageComponent = (imageIds) => {
const [images, setImages] = React.useState([])
React.useEffect(() => {
async function getImage (id) {
let imageBlob
try {
imageBlob = (await axiosClient.get(`/api/image/${id}`, { responseType: 'blob' })).data
} catch (err) {
return null
}
return URL.createObjectURL(imageBlob)
}
async function getImages () {
const imageArray = []
for (const id of imageIds) {
imageArray.push(await getImage(id))
}
setImages(imageArray)
}
getImages()
}, [imageIds])
return images.map((img, i) => {
return <img src={img} alt={`image-${i}`} key={i} />
})
}
[Edit]: If your api is a protected route just make sure your axios http client is initialized with the token already
Solution 2
This is my tried and tested method for fetching data:
componentDidMount(){
fetch('https://www.yoursite.com/api/etc', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then((response) => {
return response.text();
})
.then((data) => {
console.log( JSON.parse(data) )
this.setState{( pic: JSON.parse(data) )}
})
}
Then within your img
src={ this.state.pic }
JKhan
Updated on April 25, 2020Comments
-
JKhan about 4 years
I am fetching an image from nodejs API after verifying with JWT token. I am getting GET 200 ok response in browser Network header and picture can be seen in Preview, but I cannot use it in my app.
I am surely doing something wrong. Please let me know the proper way to display image from API. On my backend nodejs, I am using res.sendFile to send the file.
class Card extends Component { constructor({props, pic, token}) { super(props, pic, token); this.state = { pic: pic, }; urlFetch(data) { fetch(data, { headers: new Headers({ 'authorization': `Bearer ${this.props.token}`, 'Content-Type': 'application/json' }) }) .then(response => { if (response.statusText === 'OK') { return data // OR return response.url } }) } render() { const { pic } = this.state; return ( <div> <img style={{width: 175, height: 175}} className='tc br3' alt='none' src={ this.urlFetch(pic) } /> </div> ); } }
-
JKhan about 6 yearsPlease read the question again. It has nothing to do with promise. I have to use the image in my app that has been sent from backend.
-
Pixelomo about 6 yearshave you tried this.setState{(pic: data)} in your fetch method, then src={ this.state.pic } ?
-
JKhan about 6 yearsthen how do I call the function to request the image with Token?
-
Pixelomo about 6 yearsI usually do it within componentDidMount
-
msanjay almost 3 yearsinstead of response.text and parse, we can also do this .then((response) => { return response.json() }) .then((data) => { console.log( "the response is " + data ) })
-
tjgrist over 2 yearsDon't do this. You should not expose api keys in client side code.