How to display local placeholder image if image url response is null in react native - Stack Overflow
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
Comments