为什么反应不显示来自本地网址的图像

Question

你好，每个人都有一个使用 RoR 在本地运行的应用程序，后端一切正常，我也可以看到邮递员中的 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"
    }
]

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

产品列表.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>
    );
  }
}

产品.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

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

试试这个：

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