How to GET image in reactjs from api?

Question

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>
       );
      }
     }

@hurricane it wont. There is no link between the fetched image and the state property `pic`. No `setState` is happening in `urlFetch`'s callback — Ajay Gupta, May 15 '18 at 07:02
@hurricane As I have mentioned that I am using JasonWebToken on my backend to GET images. — JKhan, May 15 '18 at 07:05
@roxxypoxxy I can see the image inside browser network -> preview. i am returning the image url in my fetch only if authorization with backend is successful. — JKhan, May 15 '18 at 09:13
You are saying in your question `On my backend nodejs, I am using res.sendFile to send the file` so it's confusing what kind of data is being returned rom the server. If it is json, it would be helpful you could show us the response from the server. — roxxypoxxy, May 15 '18 at 09:19
Okay. So I think this post https://stackoverflow.com/questions/20035615/using-raw-image-data-from-ajax-request-for-data-uri#20048852 might solve your problem — roxxypoxxy, May 15 '18 at 10:28

score 7 · Answer 1 · answered Feb 14 '20 at 21:27

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

Pixelomo · Answer 2 · 2019-09-11T07:42:20.017

4

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 }

edited Sep 11 '19 at 07:42

answered May 15 '18 at 07:06

Pixelomo

6,373
4
47
57

Please 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. – JKhan May 15 '18 at 07:15
have you tried this.setState{(pic: data)} in your fetch method, then src={ this.state.pic } ? – Pixelomo May 15 '18 at 07:36
then how do I call the function to request the image with Token? – JKhan May 15 '18 at 07:40
I usually do it within componentDidMount – Pixelomo May 15 '18 at 07:58
instead of response.text and parse, we can also do this .then((response) => { return response.json() }) .then((data) => { console.log( "the response is " + data ) }) – msanjay May 17 '21 at 10:24

score 0 · Answer 3 · edited Apr 24 '20 at 11:19

 var myHeaders = new Headers();
 myHeaders.append("response", "image/jpeg");
 myHeaders.append("psId", "");
 myHeaders.append("x-api-key", "Z7dwTzHQrklCh7bvSWqhNrDTPZiLblYS");
 myHeaders.append(
    "Authorization",
    "Bearer token"
 );

var raw = "";

var requestOptions = {
  method: "GET",
  headers: myHeaders,
  //body: raw,
  redirect: "follow",
};
let response = await fetch(
  "YourURL",
  requestOptions
)
.then((response) => response)
.then((result) => result)
.catch((error) => console.log("error", error));

 res = await response.blob();

Then in image tag in your html or jsx file you can do it as follows:

 <img src={window.webkitURL.createObjectURL(res)} />

Don't do this. You should not expose api keys in client side code. — tjgrist, Sep 02 '21 at 16:50

score -2 · Answer 4 · answered May 15 '18 at 10:32

-2

I have found the answer. Here it is:

Working with the Fetch API - Google docs

answered May 15 '18 at 10:32

JKhan

1,157
4
14
23

How to GET image in reactjs from api?

4 Answers4

Linked