Question

即使我是控制台记录URI值，我的<Image/>仍为空白。

我从API获取URI。我得到的URI肯定也是https。

我的代码如下所示：

constructor(props){
    super(props)
    this.state = {
        img: ''
    }
}

componentDidMount() {
    this.getImage(this.props.id)
}

getImage(id){
    _this = this;
    fetch(`someURL${userId}`, {
        method: 'get',
        headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
    })
    .then(response => response.json())
    .then((responseJson) => {
        _this.setState({
            img: responseJson.pic_url,
        });
    });
}

render() {
    if (this.state.img) {
        return (
            <Image 
                resizeMode="cover"
                style={{height: 50, width: 50}}
                source={{uri: this.state.img}}
            />
    }
    return( 
        <View/>
    )
}

如果我只是直接将链接放入URI source={{uri: 'https://my-link'}}就可以了。我需要能够使用状态虽然b / c链接来自我的api。

Answer 1

替换此

source={uri: this.state.img}

带

source={{uri: this.state.img}} // it will work if path is proper

Answer 2

我已使用以下代码创建了snack expo：

import React, { Component } from 'react';
import { Image, Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      imageUri: '',
    };
  }

  componentWillMount() {
    const _this = this
    fetch('https://jsonplaceholder.typicode.com/photos/1')
      .then(res => res.json())
      .then(json => {
        _this.setState({
          imageUri: json.url.replace('http', 'https')
        });
      })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Image Test!
        </Text>
        {
          this.state.imageUri ? (
            <Image 
              resizeMode="cover" 
              source={{uri: this.state.imageUri}} 
              style={{height: 200, width: 200}}
            />
          ) : null
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

它运作得很好。我从API获取的URL是http，所以我不得不将其更改为https，因为它不会起作用。也许那是你的问题。

Answer 3

所以你实际上是从你的API获得响应？您是否在fetch方法中打印了URL？

你不需要_this = this;因为箭头函数已经绑定了这个。但是我认为它不应该是一个问题。

你的fetch中有一个错误。然后它应该是：

.then( (response) => response.json())

你错过了回复的括号

使用setState时，不会加载图像URI

3 个答案: