تخطي الصور الغير متاحة في JSON عند عمل filter

يمكن الاعتماد على الدالة onError لتضع صورة من عندك (تدل على عدم وجود صورة مثلا/خطأ تحميل) 

this.state = ({
     image:{uri: this.props.imageUrl}
})
const setimage = () => {
     	this.setState=({image:  require('../images/logo.png')  
	})
}

<Image
       source={this.state.image}
       style={styles.imageThumbnail}
       onError={()=>setimage()}
  />

عند حدوث مشكلة في تحميل الصورة، سيتم تعويضها بصورة من عك مثلا اللوغو..

يمكن تصفية الروابط حسب وجود الصور باختبارها مسبقًا، بفرض أن imagesUrls هي مصفوفة روابط الصور

imagesUrls = imagesUrls.filter(url => {
  var http = new XMLHttpRequest()
  http.open('HEAD', url, false)
  http.send()

  return http.status != 404)
})

تصفية جميع الروابط دفعة واحدة قد يستغرق وقتا، لذلك نقوم فقط بتصفية الروابط التي نحتاج عرضها حاليا داخل المكون نفسه 

يمكنك الاستعانة ب onerror و onload وأيضا ال state لأنشاء كون يرجع لصورة مختارة أو يمكنك أن لا تضع الصورة وتضع مكانها مكون هذا المثال سيعطيك فكرة عن كيف يمكنك التلاعب في حالتك لتفادي النتيجة غير المرغوبة 

export default function ImageComponent () {
const [state, setState] = useState({loading:true,error:false})
  const handleImageLoaded = ()=> {
    setState({ status: false, error: false });
  }

  const handleImageError= ()=> {
    setState({ status: false, error: true });
  }


    return (
      <div>
        <img
          src={state.error ? 'static/404.png' : fallbackImage}
          onLoad={handleImageLoaded}
          onError={handleImageError}
        />
        {state.status && "loading"}
      </div>
    );
  }


export default ImageComponent;