CODEWITHSUNDEEP
javascriptnode.jsreactjs
Nika Roffy
Nika Roffy

Reputation: 941

IMG src tag is not working properly in reactJS Component

I have reactJS component for user profile and in here I'm trying to load user profile picture on the page load.

I have a images folder on my BE Side and here is how I'm accesing it(NodeJS):

app.use('/uploads',express.static('uploads'))

Here is How I'm sending get request from Fe Side

 let user : any = useSelector((state : any) => state.singleUser)
 let {avatar} = user

     useEffect((): void => {
          axios
        .get(`http://localhost:4000/getUser/${match.params.userId}`)
        .then((users) => {
          dispatch(actions.getUser(users.data))
        })
        .catch((err) => {
          console.log('--------err', err);
        })
  },[])

 const getUserProfilePicture = () : void => {
axios
  .get(`http://localhost:4000/uploads/${avatar}`)
  .then((data) => {
    console.log('--------data', data);
    setImg(data.data)
  })
  .catch((err) => {
    console.log('--------err', err);
  })
  }

When I'm sending request in network dev tools preview I see the picture itself but the data I'm recieving is in this strange format GIF87a ��,�.�0�1�1�/�↵3�↵2�2� 6�8�... because of this in img tag src is undefined Could you please help me to fix this issue?

Upvotes: 0

Views: 51

Answers (1)

Jorrmungandr
Jorrmungandr

Reputation: 107

The image is in that strange format because it is binary-encoded, i believe that if you use:

<img src={`http://localhost:4000/uploads/${avatar}`} alt="user-avatar" />

It should work fine!

Upvotes: 1

Related Questions