CODEWITHSUNDEEP
javascriptreactjsreact-nativejsx
user7319004
user7319004

Reputation:

if statement inside image source uri - react native

There is an api that sometimes send empty field for image urls and react native tell me source.uri should not be empty but I am more worried because it breaks my grid layout. I would like to use a placeholder of the same size to fix that. This is what I tried so far

<View>
    <Image source={{ !this.item.thumbnail.length ? uri: 
    item.thumbnail : {require('/assets/images/placeholder.jpg')} }} />
</View>

Could any one please help.

Upvotes: 1

Views: 5688

Answers (3)

Salvador Hernandez
Salvador Hernandez

Reputation: 309

This answer does not strictly fall within the scope of your question, but it might help. Why not define the source as a variable outside of the return()

Something like:

let newSauce = !this.item.thumbnail.length ? uri: 
    item.thumbnail : {require('/assets/images/placeholder.jpg')}
return(
    <View>
         <Image source={{ newSauce }} />
    </View>
)

Upvotes: 0

user7319004
user7319004

Reputation:

Using a third party library solve my problem :

import ImageLoad from 'react-native-image-placeholder';

<View>
  <ImageLoad style={styles.pix} source={{uri: item.thumbnail}}/>
</View>

Upvotes: 0

CRice
CRice

Reputation: 32176

You are quite close in your attempt, but the syntax is not right. You just need to make sure that in one branch of the ternary, you return an object with a uri field, and in the other, you return the require call directly (don't wrap it as you've done in your example).

EG:

<Image
    // Note there is only a single enclosing brace here:
    source={this.item.thumbnail.length
        ? {uri: item.thumbnail}                      // Use object with 'uri'
        : require('/assets/images/placeholder.jpg')} // Or use require call directly
/>

Note: I reversed your condition which seemed backwards to me. You want to use the thumbnail when it has a non-zero length, and a placeholder otherwise, so I removed the negation.

Upvotes: 9

Related Questions