如何在反应原生中显示动态图像？答案

【问题标题】：how to display dynamic images in react native?如何在反应原生中显示动态图像？
【发布时间】：2017-09-11 15:34:29
【问题描述】：

我必须在我的应用程序中显示动态图像，这些图像的地址来自{item.p2[0].image}这个json对象，如下所示

/media/profiles/qA94ILU.jpg
/media/profiles/DSCN3253.JPG
/media/profiles/DSCN2102_iVPC7S1.JPG
/media/profiles/DSCN3253.JPG
/media/profiles/DSCN2204.JPG

我正在尝试将这些图像显示为

<Image source={{uri: 'http://10.42.0.1:8000{item.p2[0].image}'}} style={{width: 150, height: 100}} />

如果我在 chrome 上使用直接地址显示它或像 source={{uri:'http://10.42.0.1:8000/media/profiles/qA94ILU.jpg'}} 这样的方式显示它，那么它显示正确。那么我应该如何将该地址从 json 对象获取到任何变量以及如何显示它？

更多信息

尝试了这些但不起作用

render() {
    contents = this.state.qwerty.data.map((item) => {
        add = item.p2[0].image;
        //console.log(add);
      return (
          <View key={item.p1.id} style={styles.box}>
            <Text>
              {item.p2[0].image}
            </Text>
           <Image source={{uri: 'http://10.42.0.1:8000{item.p2[0].image}'}} style={{ width: 150, height: 100}}/>

           <Image source={{uri: 'http://10.42.0.1:8000{add}'}}style={{ width: 150, height: 100}}/>
          </View>
        );
     });

【问题讨论】：

要显示所有图片吗？
@MaulanaPrambadi 是的.. 想要显示所有图片

标签： javascript android json image react-native

【解决方案1】：

您使用错误的语法来组合字符串。更多信息请查看Template Literals。

改变这个

<Image source={{uri: 'http://10.42.0.1:8000{item.p2[0].image}'}} style={{ width: 150, height: 100}}/>

到这里

<Image source={{uri: `http://10.42.0.1:8000${item.p2[0].image}`}} style={{ width: 150, height: 100}}/>

或

<Image source={{uri: 'http://10.42.0.1:8000' + item.p2[0].image}} style={{ width: 150, height: 100}}/>

【讨论】：