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

【问题标题】：Why react doesn't show Image from url local为什么反应不显示来自本地网址的图片
【发布时间】：2018-04-16 20:44:35
【问题描述】：

大家好，我有一个使用 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
  }
})

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

【问题讨论】：

移动应用程序不知道在哪里寻找 /system/articles/avatars/000/000/001/original/user-two.png?1509755893 你需要给它完整的 http 例如。 192.168.1.103/system/articles/avatars/000/000/001/original/…
谢谢:)！它有效

标签： ruby-on-rails api react-native localhost paperclip

【解决方案1】：

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

试试这个：

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

【讨论】：