图像未使用来自 API 的地图方法显示（本机响应）

Question

我使用地图显示来自 api 的 json 格式的照片列表。我没有收到任何错误，屏幕工作正常，但不显示图像。如果我使用简单的列表作为 const 数据，一切都是 fin，但是当我获取它时出错了！我不知道我的命名和调用是否错误！这是我的代码的一些部分：在连衣裙屏幕中：

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,
                    }}
                  />
                ...
    );
  }
}

并在 ShowImage 屏幕中：

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

当我想分享图片时link，没关系。

[![]]2 我该如何解决？？

Answer 1

你的做法是正确的，但你需要添加 require(url)，像这样

   <Image style={styles.stretch}
         source={require(image.picture.large)} />
    
    
    const styles = StyleSheet.create({
      stretch: {
        width: 50,
        height: 200,
        resizeMode: 'stretch',
      },
    });

Answer 2

有点问题；图像组件源应更改为：

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

图像未使用来自 API 的地图方法显示（本机响应）

Images are not displayed with map method from API (react native)

react-native

image

fetch-api