React Native - the image component does not accept a variable for the attribute of the source URI

Question

The parent component passes the data received through the database call to the child component.

My code for the executing child component 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

The image does not appear with the code above, although an element of size 50 x 50 occupies a space (see inspector).

The validated URL works fine and the image appears in the application when it is hardcoded:

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

I also used console.logto check for imageprop before calling return. Everything indicates that the URL (i.e. imageprop) already exists from the database call.

response-native ListItem image prop avatar; , , . :

avatar={'test URL here'}

Answer 1

"response-native-ios", , iOS. , URL- "http", :

Answer 2

, image - ? url, , image

Answer 3

As it turned out, the url passed from the database had a prop-type string, but was not evaluated as equivalent to manually declaring a variable of the same URL. Calling eval(url)by database value fixes this problem. If anyone has an idea of ​​why the following code:

The following console output is output:

what 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;