Question

我必须在我的应用中显示动态图像，{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>
        );
     });

Answer 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}}/>

如何在本机中显示动态图像？

1 个答案: