我正在尝试显示从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')}
/>
有人可以帮我解决这个问题吗?提前致谢。
您可以这样做...
import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
const url = null;
export default class App extends React.Component {
getImageSource = (url) => {
if(url){
return { uri : url };
}else{
return require('./assets/snack-icon.png');
}
}
render() {
return (
<View style={styles.container}>
<Image source={this.getImageSource(url)} style={{width:100,height:100}}/>
</View>
);
}
}
如果我是正确的,请投票。