Image 使用从web API检索的图像URL链接在视图中显示图像

在网上搜索之后，我找到了一些不错的代码来满足我的需求。我已成功地从web API检索到数据，并将内容显示在页面视图平面列表上。但是，从API检索到的图像URL没有被处理，我不知道为什么

这是我的结果

/**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */

    import React, { Component } from 'react';
    import {
      Platform,
      StyleSheet,
      Text,
      View,
      FlatList,
      ActivityIndicator,
      Image
    } from 'react-native';
    //import data from './json/FetchJsonDataExample.json';

    export default class App extends Component<Props> {
      constructor(props) {
        super(props);

        this.state = {
          isLoading: true, // check if json data (online) is fetching
          dataSource: [], // store an object of json data
        };
      }

      componentDidMount() {
        return fetch("https://www.apakataorang.com/wp-json/wp/v2/posts?per_page=20")
              .then((response) => response.json())
              .then((responseJson) => {
                // set state value
                this.setState({
                  isLoading: false, // already loading
                  dataSource: responseJson
                });
              })
              .catch((error) => {
                ToastAndroid.show(error.toString(), ToastAndroid.SHORT);
              });
      }

      render() {
        // show waiting screen when json data is fetching
        if(this.state.isLoading) {
          return(
            <View style={{flex: 1, padding: 20}}>
              <ActivityIndicator/>
            </View>
          )
        }

        return(
          <View style={{flex: 1, paddingTop:30}}>
            <FlatList
              data={this.state.dataSource}
              renderItem={({item}) => {
                return (
                  <View>
                    <Text style={styles.info}>{item.title.rendered}</Text>
                    <Image
                    source={{uri: 'item.jetpack_featured_media_url'}}
                    style={{width:'100%', height: 200, resizeMode : 'stretch'}}
                    />
                    <Text style={styles.info}>{item.jetpack_featured_media_url}</Text>
                  </View>
                )
              }}
              keyExtractor={(item, index) => index.toString()}
            />
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      info: {
        fontSize: 20,
      }
    });

/**
*示例React本机应用程序
* https://github.com/facebook/react-native
*@flow
*/
从“React”导入React，{Component}；
进口{
平台，
样式表，
文本，
看法
平面列表，
活动指示器，
形象
}从“反应本机”；
//从“./json/FetchJsonDataExample.json”导入数据；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isLoading:true，//检查json数据（联机）是否正在获取
数据源：[]，//存储json数据的对象
};
}
componentDidMount（）{
返回取回（“https://www.apakataorang.com/wp-json/wp/v2/posts?per_page=20")
.then（（response）=>response.json（））
.然后（（responseJson）=>{
//设置状态值
这是我的国家({
isLoading:false，//已在加载
数据来源：responseJson
});
})
.catch（（错误）=>{
show（error.toString（），ToastAndroid.SHORT）；
});
}
render（）{
//获取json数据时显示等待屏幕
if（此.state.isLoading）{
返回(
)
}
返回(
{
返回(
{item.title.rendered}
{item.jetpack_特色_媒体_url}
)
}}
keyExtractor={（项，索引）=>index.toString（）}
/>
);
}
}
const styles=StyleSheet.create({
信息：{
尺寸：20，
}
});

---

理想情况下，我希望图像显示在视图上。

从图像组件的源属性中删除单引号，如下所示：

<Image
    source={{uri: item.jetpack_featured_media_url}}
    style={{width:'100%', height: 200, resizeMode : 'stretch'}}
/>

---

如果设置“代码>”项，jurpCytPrimeDyMyAuthURL （用一个引号）到URI，它会将其视为路径本身

哇！我是弱智，谢谢！我在想我很肯定这是对的