How to display local placeholder image if image url response is null in react native - Stack Overflow

PHOTO EMBED

Tue May 10 2022 18:29:00 GMT+0000 (Coordinated Universal Time)

Saved by @Jude∗

import * as React from 'react';
import { Text, View, StyleSheet, Image, ActivityIndicator } from 'react-native';

const url = 'https://homepages.cae.wisc.edu/~ece533/images/airplane.png';
const placeholder = require('./assets/snack-icon.png');

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      imageSource: null,
    };
  }

  componentDidMount() {
    this.getImageSource(url);
  }

  getImageSource = url => {
    if (url) {
      this.setState({ imageSource: { uri: url } });
    } else {
      this.setState({ imageSource: placeholder });
    }
  };

  onErrorImage = () => {
    this.setState({ imageSource: placeholder });
  };

  render() {
    return (
      <View style={styles.container}>
          <Image
            source={this.state.imageSource}
            style={{ width: 100, height: 100 }}
            onError={this.onErrorImage}
          /> 
      </View>
    );
  }
}


content_copyCOPY

https://stackoverflow.com/questions/59575004/how-to-display-local-placeholder-image-if-image-url-response-is-null-in-react-na