Question

我正在尝试检查图像的URL是否为404。问题在于该函数返回的是未定义的。为什么会这样？

如果我console.log记录res的状态，它的确显示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

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

我并不是您要构建的对象，但我认为您永远不应提出获取图像的请求。

import React, { Component } from 'react';
import { Image } from 'react-native';
import defaultImg from './image.png';

export default class Example extends Component {
  state = {
    image: 'some-url',
  }

  render() {
    const { image } = this.state;

    return(
     <Image 
       source={image ? { uri: image } : defaultImg}
       style={{ height: 200, width: 200 }}
     />
    )
  }
}

Answer 2

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

添加.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 3

尽管选择的答案可以解决问题，但这里我注意到的首要问题是OP处理返回404的图像uri的方式。如果您的意图是在图像uri的情况下使用后备图像因任何原因而无效（任何400ish响应），我建议利用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

祝您编程愉快！

React-Native检查图片网址

3 个答案: