Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Conditional check inside Image element

I am new with react-native and I know that it's possible to add an image in different ways.

For local images:

<Image source={require('/react-native/img/favicon.png')} />

And for remote images:

<Image
    style={{width: 50, height: 50}}
    source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

I want to check if a link is provided. If yes, I want to display the image and if not, I want to display a local one. My code looks like this:

var image = null
if (item && itame.image){
    image = item.image
}

const defaultImage = '/react-native/img/favicon.png'

return (
    <Image source={{ uri: image}} />
);

How can I in source check if the image is null or not and display the appropriate image?

like image 950
j.doe Avatar asked Feb 16 '26 21:02

j.doe


1 Answers

I posted the answer in the comments, so I will move it here for anyone else who is interested:

<Image source={(image === null) ? defaultImage : { uri: image }} />

like image 84
sme Avatar answered Feb 18 '26 09:02

sme



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!