Если заявление внутри источника изображения URI - реагировать родной

Question

Существует API, который иногда отправляет пустое поле для URL-адресов изображения и реагирует на нативный, скажите мне, source.uri не должен быть пустым, но я больше волнуюсь, потому что это нарушает мою сетку. Я хотел бы использовать заполнитель того же размера, чтобы исправить это. Это то, что я пробовал до сих пор

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

Может кто-нибудь, пожалуйста, помогите.

Answer 1

Использование сторонней библиотеки решит мою проблему:

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

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

Answer 2

Этот ответ не входит в рамки вашего вопроса, но может помочь.Почему бы не определить источник как переменную вне return()

Что-то вроде:

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

Answer 3

Вы довольно близки в своей попытке, но синтаксис неверен.Вам просто нужно убедиться, что в одной ветви троичной системы вы возвращаете объект с полем uri, а в другой вы возвращаете вызов require напрямую (не переносите его, как втвой пример).

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

Примечание: Я изменил ваше состояние, которое казалось мне задом наперед.Вы хотите использовать миниатюру, когда она имеет ненулевую длину, и заполнитель в противном случае, поэтому я удалил отрицание.