img tag not reading url which is passed in src reactJS

JavaScript
1

I’m recieving my img url from my DB like this


const [img,setImg] = useState()



 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 url like this file:///home/user/Desktop/sql/uploads/avatar-1594717135245.jpeg.gif .When I copy it and paste it to the broswer I get img which shall be displayed,so URL Is correct.

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 not displaying the picture either. Any suggestions please?