如果React Native中的图像URL响应为null,如何显示本地占位符图像

问题描述 投票:0回答:1

我正在尝试显示从API调用接收到其源Uri的图像。如果Uri是字符串格式的正确链接,则可以正常工作。但是,如果Uri链接为null或无效链接,我想显示一个本地可用的占位符图像(placeholder2)。

代码:

       <Image
          style={styles.postImage}
          source={{
            uri: imageUrl,
          }}
          defaultSource={require('../assets/images/placeholder1.png')}
        />

我知道defaultSource用于在加载实际图像时显示临时图像

我的问题是响应中的Uri是否为空,我看到此错误

enter image description here

但是如果我将代码更改为此,则会看到空白图像(灰色)

       <Image
          style={styles.postImage}
          source={{
            uri: imageUrl || 
            "require('../assets/images/placeholder2.png')",
          }}
        />

enter image description here

并且在将default source添加到上述代码后,我可以看到placeholder1图像而不是placeholder2

       <Image
          style={styles.postImage}
          source={{
            uri: imageUrl || 
            "require('../assets/images/placeholder2.png')",
          }}
          defaultSource = {require('../assets/images/placeholder1.png')}
        />

有人可以帮我解决这个问题吗?提前致谢。

react-native placeholder
1个回答
0
投票

您可以这样做...

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

如果我是正确的,请投票。

© www.soinside.com 2019 - 2024. All rights reserved.