Question

我目前正在使用以下架构获取网址：

    [
      {
        "idp": 457,
        "nom": "Promo du jour",
        "nomcat": "Poissonnerie",
        "idc ": 4,
        "nomt": "reduction",
        "idt": 3,
        "ancienprix": 5.99,
        "nouveauprix": 2.99,
        "image": "/uploads/imagepromo/1530792725.jpg",
        "datedebut": "2018-07-05",
        "datefin": "2018-07-06",
        "color": "calm-bg",
        "produit": "Sardines",
        "nombrearticlegratuit": null,
        "nombrearticleachete": null,
        "pourcentage": null,
        "unite": "kg",
        "remarque": null,
        "libre": null
      },{
        "idp": 457,
        "nom": "Promo du jour",
        "nomcat": "Poissonnerie",
        "idc ": 4,
        "nomt": "reduction",
        "idt": 3,
        "ancienprix": 5.99,
        "nouveauprix": 2.99,
        "image": "/uploads/imagepromo/1530792725.jpg",
        "datedebut": "2018-07-05",
        "datefin": "2018-07-06",
        "color": "calm-bg",
        "produit": "Sardines",
        "nombrearticlegratuit": null,
        "nombrearticleachete": null,
        "pourcentage": null,
        "unite": "kg",
        "remarque": null,
        "libre": null
}]

我正在将JSON映射到基于本机的listItems中，并且内部有一个带有源路径的图像；我的路径看起来像这样：

var path ='http://example.fr/promoapp/public/promo/'+ item.image

用于映射元素的代码：

<List dataArray={this.state.items} renderRow={
            (item) => <ListItem itemDivider={false} style={{ flexDirection: 'column' }} key={item.id} onPress={() => this.handleNav(item.name, 'Belgique', item.price, item.image)}>
              {this.cardRenderer(item)}
            </ListItem>

carRender（）的代码：

cardRenderer(item) {


        switch(item.nomt){
              case 'reduction':{
                var urlImage = `http://seedup.tn/promoapp/public/promo'.${item.image}`
                //Reactotron.log(urlImage)

              } return (

                <Card padder style={{ flex: 1, flexDirection: 'column', backgroundColor: CardColor[item.nomcat], }} >
                <View style={{ alignItems: 'center', justifyContent: 'center', marginBottom: 10, }}>
                  <Text style={{ fontSize: 18, color: 'white' }}>{item.nomcat}</Text>
                </View>

                <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Text style={{ fontSize: 18, color: 'white', marginLeft: 15 }} >{item.produit}</Text>
                  {Reactotron.log(urlImage)}
                  <Image source={{uri: urlImage}} style={{ width: Math.round(Layout.window.width / 2), height: Math.round(Layout.window.width / 2), marginRight: 15, marginBottom: 5 }} />
                </View>

                <View style={{ width: Layout.window.width, height: 1, backgroundColor: 'white', }} /> {/* white line */}

                <View style={{ flexDirection: 'row', }}>

                </View>
                <View style={{ flex: 1, alignItems: 'center', }}>
                  <Text style={{ fontSize: 18, color: 'white' }}> {item.ancienprix}€</Text>
                  <Text style={{ fontSize: 18, color: 'white' }}> description</Text>
                </View>

              </Card>
              )

      }

但是一旦记录路径变量，它就为空，但我没有得到图像。

我尝试了所有可能的ES6组合，但没有尝试？

有关如何实现此目标的任何帮助？

Answer 1

我发现问题在于您的代码正确url错误我做了一些解决方法并找到了

//See image here
http://seedup.tn/promoapp/public/uploads/imagepromo/1530792725.jpg

// Use this
http://seedup.tn/promoapp/public/
//instead of 
http://seedup.tn/promoapp/public/promo/

网址路径连结的JSX语法？

1 个答案: