JSX syntax for url path concat?

Question

i am currently getting a url with this schema :

    [
      {
        "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
}]

I am mapping the JSON into a native-base listItems and inside i have an image with a source path; my path looks something like this:

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

The code for mapping the element:

<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>

code of 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>
              )

      }

but i am not getting the image, once i log the path variable it is empty.

I tried all possible combination of ES6 but nothing ??

any help on how to achieve this ?

Answer 1

I found the problem your code is correct url is wrong i did a little bit workaround and found this

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