为什么反应不会从本地网址显示图片

Question

大家好我每个人都有一个本地运行的应用程序与RoR一起在后端工作正常，我也可以看到Postman中的Json

  

http://127.0.0.1:3000/api/v1/articles

[
    {
        "id": 1,
        "title": "Barack Obama",
        "description": "Sabias que? el era muy pobre",
        "avatar_content_type": "/system/articles/avatars/000/000/001/original/user-two.png?1509755893"
    }
]

并且在我的移动模拟器中，我可以看到标题和描述，这意味着一切正常。但我无法看到图像：/一些建议？

ProductList.js

// step 1: import libraries
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import Product from './Product';

export default class ProductList extends Component {

  state = {
    products: []
  }

  componentDidMount() {
    return fetch('http://MYIP:3000/api/v1/articles')
                .then((response) => response.json())
                .then((responseJson) => {
                  this.setState({products: responseJson})
                })
  }

  render() {

    var productList = this.state.products.map(function(item) {
      return (
        <Product title = { item.title }
                 description = { item.description }
                 image_url = { item.avatar_content_type }
                 key = { item.id }/>
      )
    })
    return (
      <ScrollView>
        { productList }
      </ScrollView>
    );
  }
}

Product.js

// step 1: import libraries
import React, { Component } from 'react';
import { StyleSheet, Text, View, Alert, Image } from 'react-native';

// step 2: create component
export default class Product extends Component {

  render() {
    return (
      <View>
        <Image source={{uri: this.props.image_url }} style={{width: 60,height: 60,}}/>
        <Text style = { style.textStyle }>{ this.props.title }</Text>
        <Text style = { style.textStyle }>{ this.props.description }</Text>
      </View>
    );
  }
}

const style = StyleSheet.create({
  textStyle: {
    fontSize: 20,
    padding: 20
  },
  amountStyle: {
    fontSize: 15,
    paddingLeft: 20
  }
})

  

我没有异常或类似的东西，我不仅能够在我的移动模拟器中看到图像

Answer 1

可能是因为在尝试执行异步操作时，在第一次渲染期间它是空的 所以你可以做的是你可以通过给出一个条件来检查我通常用lodash使用_.isEmpty方法

试试这个：

<Image source={{uri: (_.isEmpty(this.props.image_url) ? null : this.props.image_url) }}