'React Native conditional render ImageBackground picture
I am trying to set my image based on if my prop is not null. If my prop is not null I need to show image from a web link. If the prop is null then I need to show image from local file. What I am doing so far is not working
<ImageBackground
source={{
item.padStyle.icon !== null ? uri: 'https://example.com/image.png' : require('../../../assets/images/Hello.png'),
}}
style={styles.padImage}>
<Text
style={[
styles.textBtnStyle,
{
color:
item.padStyle.textColor !== null
? item.padStyle.textColor
: colors.text,
},
]}>
{item.title}
</Text>
</ImageBackground>
Solution 1:[1]
please try this way,
<ImageBackground
style={{height: 100, width: 100}}
source={
item.padStyle.icon !== null
? {uri: 'https://picsum.photos/200/300'}
: require('../../../assets/images/noImage.jpg')}>
</ImageBackground>
Solution 2:[2]
Could you try this solution;
const imgSrc=item.padStyle.icon ? {uri:'https://example.com/image.png'} : require('../../../assets/images/Hello.png');
return(
<ImageBackground
source={imgSrc}
style={styles.padImage}>
<Text
style={[
styles.textBtnStyle,
{
color:
item.padStyle.textColor !== null
? item.padStyle.textColor
: colors.text,
},
]}>
{item.title}
</Text>
</ImageBackground>
);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Dhanesh M |
Solution 2 |