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.

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.

• javascript
• reactjs
• react-native
• jsx

• placeholder.jog or placeholder.jpg ? – Dacre Denny Commented Sep 11, 2018 at 1:48
• What is uri: item.thumbnail supposed to be? – Adam Commented Sep 11, 2018 at 1:51
• @adam using flatlist and render item – user7319004 Commented Sep 11, 2018 at 1:59
• @dacre-denny typo – user7319004 Commented Sep 11, 2018 at 2:00

3 Answers 3

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.

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>  

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