React-Native 检查图像 url

Question

我正在尝试检查图像的 url 是否为 404。问题是该函数返回未定义。为什么会发生这种情况？

如果我 console.log 资源的状态，它确实显示 404，因此 if 语句正在执行。

function checkImageURL(url){
 fetch(url)
    .then(res => {
    if(res.status == 404){
      console.log(res.status)
      return <Image source={require('./Images/default.png')}/>
    }else{
      return <Image source={{uri: `${url}`}}  />
   }
 })
}

Answer 1

您不会在错误响应中返回任何内容。

添加 .catch 并返回一个组件或其中的 null 。例如

function checkImageURL(URL) {
  fetch(URL)
    .then((res) => {
      if (res.status == 404) {
        return <Image source={require('./Images/default.png')} />;
      } else {
        return <Image source={{ uri: `${url}` }} />;
      }
    })
    .catch((err) => {
      return <Image source={require('./Images/default.png')} />;
    });
}

Answer 2

尽管所选答案解决了有问题的问题，但我注意到这里的首要问题是 OP 处理返回 404 的图像 uri 的方式。如果您的目的是在图像的 uri 无效的情况下使用后备图像无论出于什么原因（任何 400 左右的响应），我都建议利用该onError <Image/>道具。

我有一个<Avatar/>使用此道具的组件：

import { Image, ImageStyle } from 'react-native'
import React, { useState } from 'react'
import { avatarPlaceholder } from '../../assets/images'

interface Props {
  avatar: string;
  style: ImageStyle;
}

const Avatar = React.memo((props: Props) => {
  const [valid, setValid] = useState(true)
  const { avatar, style } = props

  return (
    <Image
      onError={() => setValid(false)}
      style={[{
        resizeMode: "cover",
        borderRadius: 1000,
      }, style]}
      source={{ uri: valid ? avatar : avatarPlaceholder }}
    />
  )
})

export default Avatar

快乐编码！

Answer 3

实际上，您不需要检查图像响应状态是否无法404显示。您只需获取数据并将其存储在您的状态中，然后检查图像是否可以像下面的示例一样显示。

我不完全是你想要构建的，但在我看来，你永远不应该请求获取图像。

现在有一个defaultSource道具。

<Image
  source={{ uri: 'https://example.com/image.png' }}
  style={{ height: 200, width: 200 }}
  defaultSource={defaultImg}
/>

检查零食https://snack.expo.io/@abranhe/defaultimage