时间戳

首页 > 解决方案 > IMG 标签未在 reactJS 中显示给定图片

javascript - IMG 标签未在 reactJS 中显示给定图片

问题描述

我的 reactJS 应用程序中有用户配置文件组件，我想在加载组件时显示用户配置文件图片，我使用 nodeJS Express 作为 BE，PostgreSQL 作为 DB。这是我想要做的

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);
    })
},[])

在此之后，我将 Img 设置为 img，如下所示：

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

当我console.log(img)得到这样的 img 路径时uploads/avatar-1594717135245.jpeg.gif

这是我的 img 标签：<img ref={fileRef} src={img} width={'400'} alt={'picture'}/>它在控制台中没有显示任何错误，但问题是它显示 img 一秒钟然后消失。任何建议为什么以及如何修复它？

标签： javascriptreactjs

解决方案

尝试在调度后直接移动setImage(users.data.avatar)，你已经有了头像信息。删除秒 useEffect，您将有更少的移动部件来调试问题。

推荐阅读