React-Native check image url

Question

I am trying to check if the url of an image is 404 or not. The problem is that the function is returning undefined. Why is this happening?

If I console.log the status of the res it does show 404 so the if statement is being executed.

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}`}}  />
   }
 })
}

Solution 1

you are not returning anything on error response.

add .catch and return a component or null in that. for eg

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')} />;
    });
}

Solution 2

Actually, you don't need to check if the image response status it's not 404 to be able to display it. You just need to fetch your data and store it in your state, then check if the image can be displayed like the example below.

I am not exactly what are you trying to build but in my opinion, you should never make a request to fetch an image.

There is a defaultSource prop now.

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

Check the snack https://snack.expo.io/@abranhe/defaultimage

Solution 3

Although the selected answer solves the problem in question, the overarching problem here I notice is the way the OP is handling an image uri that returns a 404. If your intention is to have a fallback image in the case that an image's uri is invalid for whatever reason (any 400ish response), I'd recommend leveraging the onError <Image/> prop.

I have an <Avatar/> component that uses this prop:

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

Happy coding!

Comments

[Abraham Calf]

Check out this to see if this is better for you stackoverflow.com/a/56675678/7602110

[jrocc]

The catch statement did work I think because the fetch is getting an error its just getting a 404 status response.

[Piyush Abhishek Singh]

So it solved your problem . Then please accept my answer.

[The1993]

This does not work. If your some-url path is not a valid image, it will show empty image instead of the defaultImg

[instanceof]

Agreed, this does not work, exactly as The1993 said.

[Abraham Calf]

I have updated the answer and it should be working fine now

[Admin]

Ahh yes this is a huge life saver. I was trying to use the on error to change the state but I was often mapping over multiple avatars so one 404 would set them all to false. I knew there was a better way.