React Native - 图像组件不接受源 URI 属性的变量

Question

A parent component passes down data received through a database call to the child component.

My code for the child component being rendered is as follows:

import React, { Component } from 'react'
import { Image, View, Text } from 'react-native'

class ListItem extends Component {
  render () {
    const { name, image } = this.props.item

    return <View>
      <Image
        style={{ width: 50, height: 50 }}
        source={{ uri: image }} />
      <Text>
        {name}
      </Text>
    </View>
  }
}

export default ListItem

With the code above, no image shows up, although a 50 x 50 element does take up space (seen using inspector).

The URL being tested works fine and the image shows up in the app when hard-coded as such:

source={{ uri: 'test URL here' }}

I've also used console.log to check that the image prop exists before the return call. Everything indicates that the URL (ie the image prop) already exists from the database call.

On a side-note, I was originally using react-native's ListItem component and passing it the image prop as its avatar attribute; the same issue occurs where the image doesn't show up, just a grey box. This is also fixed by setting the following:

avatar={'test URL here'}

Answer 1

As you tagged your question under 'react-native-ios' I suppose that you are traying your code in iOS. In that case, and if your url is an 'http' one, you must check the following link:

Enable App Transport Security

Answer 2

Are we 100% sure image is a string? Since it works when hardcoding the url, perhaps the image prop isn't strictly a string

Answer 3

As it turns out, the url being passed in from the database did have prop-type string but did not evaluate as being equivalent to a manually declared variable of the same URL. Invoking eval(url) on the database value fixes this issue. If anyone has an insight as to why the following code:

results in the following console output:

that would be appreciated!

Answer 4

You can try this,

class ListItem extends Component {
  render () {
    const { name, image } = this.props.item;
    const sourceUri = { uri: image };

    return (
      <View>
        <Image
          style={{ width: 50, height: 50 }}
          source={sourceUri} />
      </View>
    );
  }
}

export default ListItem;