I use map to display a list of photo which is in json format from api. I don't receive any error , the screens work correctly, but images are not displayed. if I use simple list as const data, every things is fin, but when I fetch it goes wrong!i dont know if my naming and calling is wrong! here are some parts of my code: in Dress screen:

export class Dress extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      error: null,
    };

    this.arrayholder = [];
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const url = `https://randomuser.me/api/?&results=5`;
    this.setState({ loading: true });

    fetch(url)
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          data: res.results,
          error: res.error || null,
          loading: false,
        });
        this.arrayholder = res.results;
      })
      .catch((error) => {
        this.setState({ error, loading: false });
      });
  };

  render() {
    return (
      ...
            {this.state.data.map((image, index) => (
              <TouchableOpacity
                key={index}
                style={{
                  height: GoldenHeight,
                  width: windowWidth / 3 - 10,
                  margin: 3,
                  elevation: 5,
                  shadowOffset: { width: 1, height: 1 },
                  shadowColor: "black",
                  shadowOpacity: 0.36,
                  shadowRadius: 6.68,
                  borderRadius: 10,
                }}
                onPress={() =>
                  this.props.navigation.navigate("ShowImage", {
                    url: image.picture.large,
                    tt: "22",
                  })
                }
              >
                ...
                  <Image
                    source={image.picture.large}
                    style={{
                      height: "100%",
                      width: "100%",
                      borderRadius: 10,
                    }}
                  />
                ...
    );
  }
}

and in ShowImage screen:

....
<Image
            source={this.props.route.params.url}
            resizeMode="contain"
            style={styles.image}
          ></Image>
...

whene I want to share image link , its ok.

[![]]2 how can I fix it??

CodePudding user response：

Your Doing in correct way but you need to add require(url),Something like this

<Image
        style={styles.stretch}
        source={require(image.picture.large)}
      />


const styles = StyleSheet.create({
  stretch: {
    width: 50,
    height: 200,
    resizeMode: 'stretch',
  },
});

CodePudding user response：

there was a bit problem ;Image component source should change to :

<Image
   source={{uri: image.picture.large}}
'''