Reactjs 如何检查配置文件图像是否存在，或者在react应用程序中使用回退jpg

我正在React应用程序中显示搜索结果。并非所有用户都存在文件

img src={

/users/${id}/avatar.jpg

}

。用户的性别可在

$gender

字段中找到。如果他们没有上传avatar.jog，我想使用male.jpg表示性别=男性，使用女性.jpg表示性别=女性

以下是组件代码：

          import React, { Component } from 'react'
    import AppLink from '../../others/link/link'

    class SearchResult extends Component {

                    </span>
                        </div>
                        <div className="mb1">
                          <span><span className="text-bold">Gender: src here</span>
                        </div>
                      </div>
                </div>

            </div>
          )
        }
    }

    export default SearchResult

import React，{Component}来自“React”
从“../../others/link/link”导入AppLink
类SearchResult扩展组件{
性别：这里是src
)
}
}
导出默认搜索结果

确定用户档案图像的逻辑可能更好地放在您的后端，以便您获取和显示化身图像的总体设计更简单、更可靠

如果用户没有上传化身图像，则服务器可以通过用户的

id

（即，如果已经上传了化身，则服务化身，或者服务性别图像作为后备方案）来决定为该用户服务什么图像。这将在前端代码中保存潜在问题（即有效的客户端用户数据，但服务器上没有化身图像，导致图像未找到错误）

然而，如果在定义用户

id

时，您知道存在化身，那么以下可能是您的需求：

class SearchResult extends Component {
  render() {
    let {
      id,
      username,
      firstname,
      surname,
      gender
    } = this.props

    // Determine the avatarImage path depending on the existance of a valid 
    // user id. If user id is invalid, fallback to an image based on gender
    const avatarImage = (id !== undefined && id !== null) ? 
    `/users/${id}/avatar.jpg` : `/${ gender }.jpg`

    return (
      <div className="user_item">
        <div className="user-container">
          <div className="user-l">
            <div className="text-center">
              <AppLink url={`/profile/${username}`}>

                {/* Apply the computed avatarImage to the img element /*}
                <img src={ avatarImage } className="user_avatar" />

              </AppLink>
            </div>
          </div>
          <div className="user-m half-container">
            <div className="halfL">
              <div className="mb1">
                <AppLink
                  url={`/profile/${username}`}
                  className="lead m2 s_userName"
                  label={username}
                />
              </div>
              <span>{firstname} {surname}</span>
            </div>
            <div className="halfR">
              <div className="mb1">
                <span>
                  <span className="text-bold">Age:</span> {age}
                </span>
                    </div>
                    <div className="mb1">
                      <span><span className="text-bold">Gender:</span> {gender}</span>
                    </div>
                  </div>
            </div>

            <div className="mb1">
              <AppLink
                url={`/profile/${username}`}
                className="btn btn-sm"
                label={`Contact ${username}`}
              />
              </div>
            </div>

          </div>
        </div>
      )
    }
}

export default SearchResult

类搜索结果扩展组件{
render（）{
让{
身份证件
用户名，
名字，
姓，
性别
}=这是道具
//根据存在的有效数据确定avatarImage路径
//用户id。如果用户id无效，请返回基于性别的图像
const avatarImage=（id！==未定义和id！==空）？
`/users/${id}/avatar.jpg`:`/${gender}.jpg`
返回(
{/*将计算的avatarImage应用于img元素/*}
{名字}{姓氏}
年龄：{Age}
性别：{Gender}
)
}
}
导出默认搜索结果

这个答案不是一个理想的解决方案（如上所述，您应该在数据库中存储用户的化身状态），但是它显示了一种从客户端解析用户化身的策略，以实现您的目标

简而言之，这种方法将向后端发出请求，以查看服务器上是否存在用户的化身图像。如果请求成功，则该化身图像url存储在组件中并用于后续呈现。 如果请求失败，组件将应用“回退”行为——也就是说，它将使用输入道具推断“性别”图像，类似于上面所示

请参阅下面的

[更新]

标签，了解当前代码中的相关新增内容：

class SearchResult extends Component {

  constructor(props) {
    super(props)

    /* [UPDATED] Setup the default userImage to be initially displayed */
    this.state = {
       userImage : `/images/users.jpg`
    }
  }

  /* [UPDATED] When the component is mounted, use the id and gender props
     to decide which image to display for the user
  */
  componentDidMount() {

    const { id, gender } = this.props
    const avatarImage = `/users/${id}/avatar.jpg`

    /* [UPDATED] Query the server for the user's avatar - if the query 
       succeeds then use the avatar image, otherwise fallback to gender 
       image. In either case, the userImage is stored in the components 
       state
    */
    fetch(avatarImage).then(response => {
      if(!response.ok) {
        this.setState({ userImage : `/${ gender }.jpg` })
      }
      else {
        this.setState({ userImage : `/users/${id}/avatar.jpg` })
      }
    })
  }

  render() {
    let {
      id,
      username,
      firstname,
      surname,
      gender
    } = this.props

    {/* [UPDATED] Extract userImage from state /*}
    const { userImage } = this.state

    return (
      <div className="user_item">
        <div className="user-container">
          <div className="user-l">
            <div className="text-center">
              <AppLink url={`/profile/${username}`}>

                {/* [UPDATED] Apply the userImage to the img element based on state /*}
                <img src={ userImage } className="user_avatar" />

              </AppLink>
            </div>
          </div>
          <div className="user-m half-container">
            <div className="halfL">
              <div className="mb1">
                <AppLink
                  url={`/profile/${username}`}
                  className="lead m2 s_userName"
                  label={username}
                />
              </div>
              <span>{firstname} {surname}</span>
            </div>
            <div className="halfR">
              <div className="mb1">
                <span>
                  <span className="text-bold">Age:</span> {age}
                </span>
                    </div>
                    <div className="mb1">
                      <span><span className="text-bold">Gender:</span> {gender}</span>
                    </div>
                  </div>
            </div>

            <div className="mb1">
              <AppLink
                url={`/profile/${username}`}
                className="btn btn-sm"
                label={`Contact ${username}`}
              />
              </div>
            </div>

          </div>
        </div>
      )
    }
}

export default SearchResult

类搜索结果扩展组件{
建造师（道具）{
超级（道具）
/*[更新]设置初始显示的默认用户图像*/
此.state={
userImage:`/images/users.jpg`
}
}
/*[更新]安装组件时，使用id和性别道具
决定要为用户显示的图像
*/
componentDidMount（）{
const{id，gender}=this.props
const avatarImage=`/users/${id}/avatar.jpg`
/*[更新]向服务器查询用户的化身-如果查询
然后使用化身图像，否则返回到性别
在这两种情况下，userImage都存储在组件中
状态
*/
获取（avatarImage）。然后（响应=>{
如果（！response.ok）{
this.setState（{userImage:`/${gender}.jpg`}）
}
否则{
this.setState（{userImage:`/users/${id}/avatar.jpg`}）
}
})
}
render（）{
让{
身份证件
用户名，
名字，
姓，
性别
}=这是道具
{/*[UPDATED]从状态提取userImage/*}
const{userImage}=this.state
返回(
{/*[UPDATED]基于状态将userImage应用于img元素/*}
{名字}{姓氏}
年龄：{Age}
性别：{Gender}
)
}
}
导出默认搜索结果

---

希望这有帮助

谢谢你的回答。id将始终存在。如果用户上传了一个化身，我会将其存储在用户的文件夹中。因此，检查id是否存在将不起作用。正如我在问题中提到的-

文件img src={/users/${id}/avatar.jpg}并不适用于所有用户

您是否提供了任何方法让客户端应用程序确定后端用户是否存在

avatar.jpg

？不，我只是让他们上传一个直接进入一个名为其id的文件夹的图像。。例如，用户456的图像将作为avatar.jpg保存在名为456的文件夹中。。这是我第一次想到有阿凡达的数据库专栏会很好。如果没有，我必须检查文件夹中的文件是否存在..是-也可以检查组件