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

I'm trying to show an image for which the source Uri is received from the API call.
It is working totally fine if the Uri is a correct link in a string format. But if the Uri link is null or not a valid link I would like to show a placeholder image(placeholder2) that is available locally.

Code:

       <Image
          style={styles.postImage}
          source={{
            uri: imageUrl,
          }}
          defaultSource={require('../assets/images/placeholder1.png')}
        />

I know defaultSource is used to show a temporary image when the real image is being loaded

My problem is if the Uri is null from the response, I'm seeing this error

But if I change the code to this, I see blank image (gray color)

       <Image
          style={styles.postImage}
          source={{
            uri: imageUrl || 
            "require('../assets/images/placeholder2.png')",
          }}
        />

And upon adding default source to the above code I can see the placeholder1 image instead of placeholder2

       <Image
          style={styles.postImage}
          source={{
            uri: imageUrl || 
            "require('../assets/images/placeholder2.png')",
          }}
          defaultSource = {require('../assets/images/placeholder1.png')}
        />

Can someone help me to fix this?
Thanks in advance.

Update:

Answer by @louieKim actually worked for me

 <Image source={imageUrl ? {uri: imageUrl} : require('../assets/images/placeholder2.png')} >

you can do like this...

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

If i am correct, upvote pls.

You can simply follow the old-school approach here:

 {imageURl!=null && <Image
          style={styles.postImage}
          source={{
            uri: imageUrl 
          }}
        />}

{imageURl==null && <Image
          style={styles.postImage}
          source={{
            uri: '../assets/images/placeholder2.png'
          }}
        />}

Try this

<Image
  style={styles.postImage}
  source={{uri: your_image_url !== null ? 
    your_image_url : '../xxx/your_local_image'}}
  }}
/>

<Image
    source={item.image ? { uri: item.image } : Images.no_image}
    style={{ height: '100%', width: '100%', borderRadius: 20, }}
/>