Question

有一个api有时会向图像URL发送空字段并做出响应，告诉我source.uri不应该为空，但我更担心，因为它破坏了我的网格布局。我想使用相同大小的占位符来修复该问题。这是我到目前为止尝试过的

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

任何人都可以帮忙。

Answer 1

您的尝试非常接近，但是语法不正确。您只需要确保在三元组的一个分支中，您将返回一个带有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
/>

注意：我扭转了您的状况，这似乎是倒退的。您要在缩略图的长度不为零时使用缩略图，否则要使用占位符，因此我删除了否定项。

Answer 2

使用第三方库解决了我的问题：

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

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

Answer 3

此答案并不严格属于您的问题范围，但可能会有所帮助。为什么不将源定义为return()

之外的变量

类似的东西：

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

图像源uri中的if语句-反应本机

3 个答案: