IMG Tag is not displaying given picture in reactJS

Question

I have user profile component in my reactJS App and I want to display user profile picture on load of component I'm using nodeJS Express as BE and PostgreSQL as DB. Here is what I'm trying to do

const [img,setImg] = useState()
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);
    })
},[])

After this i setImg to the img like this :

useEffect (() : void => {
setImg(avatar)
console.log('--------img', img);
  })

When i console.log(img) i get img path like this uploads/avatar-1594717135245.jpeg.gif

Here is my img tag : <img ref={fileRef} src={img} width={'400'} alt={'picture'}/> it is showing no errors in the console but the problem is it is displaying img for a second and then it dissapears.Any suggestions why and how can i fix it ?

check this answer `https://stackoverflow.com/questions/18386361/read-a-file-in-node-js` and also check how to convert image to base64 string. then return base64 string of image — Apostolos, Jul 14 '20 at 12:53

score -1 · Answer 1 · answered Jul 14 '20 at 12:52

-1

Try moving the setImage(users.data.avatar) directly after the dispatch, you already have the avatar information there. Remove the seconds useEffect, you'll have less moving parts to debug the problem.

answered Jul 14 '20 at 12:52

Julio Truzzi

512
1
4
11

IMG Tag is not displaying given picture in reactJS

1 Answers1