title: How to display local placeholder image if image url response is null in react native
body: <p>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(<code>placeholder2</code>) that is available locally. </p>
  
  <p>Code:</p>
  
  <pre><code>       &lt;Image
            style={styles.postImage}
            source={{
              uri: imageUrl,
            }}
            defaultSource={require('../assets/images/placeholder1.png')}
          /&gt;
  </code></pre>
  
  <p>I know <code>defaultSource</code> is used to show a temporary image when the real image is being loaded</p>
  
  <p>My problem is if the Uri is null from the response, I'm seeing this error</p>
  
  <p><a href="https://i.stack.imgur.com/SbGiX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SbGiX.png" alt="enter image description here"></a></p>
  
  <p>But if I change the code to this, I see blank image (gray color)</p>
  
  <pre><code>       &lt;Image
            style={styles.postImage}
            source={{
              uri: imageUrl || 
              "require('../assets/images/placeholder2.png')",
            }}
          /&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/6cQS5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6cQS5.png" alt="enter image description here"></a></p>
  
  <p>And upon adding <code>default source</code> to the above code I can see the <code>placeholder1</code> image instead of <code>placeholder2</code></p>
  
  <pre><code>       &lt;Image
            style={styles.postImage}
            source={{
              uri: imageUrl || 
              "require('../assets/images/placeholder2.png')",
            }}
            defaultSource = {require('../assets/images/placeholder1.png')}
          /&gt;
  </code></pre>
  
  <p>Can someone help me to fix this?
  Thanks in advance. </p>
  
  <p><strong>Update</strong>:</p>
  
  <p>Answer by @louieKim actually worked for me</p>
  
  <pre><code> &lt;Image source={imageUrl ? {uri: imageUrl} : require('../assets/images/placeholder2.png')} &gt;
  </code></pre>