如果图像url响应是空的，则如何显示本地占位符图像？
如果图像url响应是空的，则如何显示本地占位符图像？
提问于 2020-01-03 07:55:15
我试图显示一个从API调用中接收到源Uri的图像。如果Uri是字符串格式中的正确链接，它就可以完全正常工作。但是，如果Uri链接为null或无效链接，我想要显示一个占位符图像(placeholder2)，它是本地可用的。
代码：
<Image
style={styles.postImage}
source={{
uri: imageUrl,
}}
defaultSource={require('../assets/images/placeholder1.png')}
/>我知道defaultSource用于在加载真实图像时显示临时图像。
我的问题是，如果Uri从响应中为空，我就会看到这个错误
但是，如果我将代码更改为此，则会看到空白图像(灰色)。
<Image
style={styles.postImage}
source={{
uri: imageUrl ||
"require('../assets/images/placeholder2.png')",
}}
/>
将default source添加到上面的代码中，我可以看到placeholder1映像而不是placeholder2
<Image
style={styles.postImage}
source={{
uri: imageUrl ||
"require('../assets/images/placeholder2.png')",
}}
defaultSource = {require('../assets/images/placeholder1.png')}
/>有人能帮我解决这个问题吗？提前谢谢。
更新
卢伊金的回答其实是为我工作的
<Image source={imageUrl ? {uri: imageUrl} : require('../assets/images/placeholder2.png')} >回答 4
Stack Overflow用户
发布于 2020-01-03 09:02:58
您可以在这里简单地遵循老派的方法：
{imageURl!=null && <Image
style={styles.postImage}
source={{
uri: imageUrl
}}
/>}
{imageURl==null && <Image
style={styles.postImage}
source={{
uri: '../assets/images/placeholder2.png'
}}
/>}Stack Overflow用户
发布于 2020-05-03 20:34:07
尝尝这个
<Image
style={styles.postImage}
source={{uri: your_image_url !== null ?
your_image_url : '../xxx/your_local_image'}}
}}
/>Stack Overflow用户
发布于 2022-05-26 12:06:53
<Image
source={item.image ? { uri: item.image } : Images.no_image}
style={{ height: '100%', width: '100%', borderRadius: 20, }}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59575004
复制相关文章
相似问题
腾讯云开发者
