How to reload image url one more time if url shows error in loading-CodePudding

I am trying to load images from URL on flatlist using This image component. In this component there is a property (onError?: () => void ) this property is called on an image fetching error. When I run my app in low network some images failed to load, so what code should I write in (onError?: () => void ) so that the URL that failed to load images should load one more time in low network.

I am creating this App in React Native for iOS

I have done this :

App.js

import React, { useState } from 'react';
import Product from './product';
import {
  FlatList,
  SafeAreaView
} from 'react-native';

const products = [
  {productImage: "https://media.istockphoto.com/photos/poverty-concept-used-red-shoes-for-children-in-a-thrift-shop-between-picture-id1303292803?s=612x612"},
  {productImage: 'https://media.istockphoto.com/photos/poverty-concept-used-red-shoes-for-children-in-a-thrift-shop-between-picture-id1303292803?s=612x612'},
  {productImage: "https://media.istockphoto.com/photos/poverty-concept-used-red-shoes-for-children-in-a-thrift-shop-between-picture-id1303292803?s=612x612"},
  {productImage: 'https://media.istockphoto.com/photos/poverty-concept-used-red-shoes-for-children-in-a-thrift-shop-between-picture-id1303292803?s=612x612'},
]

const App = () => {
  return (
    <SafeAreaView>
      <FlatList 
      numColumns={2}
      data={products}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => (<Product product={item} />)}>
</FlatList>
    </SafeAreaView>
  );
};

export default App;

product.js

import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';

class Product extends React.Component {
    render() {
        const { productImage } = this.props.product
        return (
            <View>
                <FastImage
        style={{ width: 200, height: 200, borderWidth: 2, }}
        source={{
            uri: productImage,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />

 one rror = {e => console.log('error')

            </View>
        )
    }
}

export default Product;

What code should I write in (onError?: () => void ) function to reload failed images URL ?

CodePudding user response：

Try setting image url in state and update when error on loading image.

product.js

import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';

class Product extends React.Component {
    constructor(props){
     this.state = {
       uri : this.props.product.productImage
     }
    }

    render() {
        const { productImage } = this.props.product
        return (
            <View>
              <FastImage
                 style={{ width: 200, height: 200, borderWidth: 2, }}
                 source={{ uri }}
                 resizeMode={FastImage.resizeMode.contain}
                 one rror = {e => this.setState({uri:productImage})}
              />
            </View>
        )
    }
}

export default Product;

CodePudding user response：

If I understand you correctly, you want to try to load the same image for a 2nd time when there is an error on the 1st try. I would try to re-render the component on Error (even better, wrap the image component with a wrapper component so that the whole Product component is not re-rendered):

const Product = () => {
  const [fetchCounter, setFetchCounter] = useState(0);

  return (
    <img 
      src={'imageUrl'}
      one rror={() => {
        if (fetchCounter < 1) {
          setFetchCounter(fetchCounter  );
        }
      }} 
    />
  )
}

I do not know your use case, but you can load a fallback image instead. It could look something like this:

const Product = () => {
  const [imageUrl, setImageUrl] = useState('product-img-url');

  return (
    <img 
      src={imageUrl}
      one rror={() => setImageUrl('fallback-img-url')} 
    />
  )
}