image is not displaying while using a map function in react native

user_14781783 0
Viewed 878

I've hardcoded some datas and doing a map to fetch all data of my array, All datas are displaying except my image. I've tried several solution but nothing is working. When I'm using a require with a image path in string it's working but I don't find the way to display different images any idea ?

var articleData = [
    { name: "Textile motorcycle jacket", brand: "Dainese", img: "../assets/Jacket.jpg", price: '200' },
    { name: "Summer motorcycle gloves", brand: "Furygan", img: "../assets/summer_gloves.jpg", price: '30' },
    { name: "Winter motorcycle gloves", brand: "Triumph", img: "../assets/winter_gloves.jpg", price: '70' },
    { name: "Motorcycle boots", brand: "BMW", img: "../assets/boots.jpg", price: '180' },
    { name: "Goretex / waterproof pants", brand: "Dainese", img: "../assets/pants.jpg", price: '150' },
    { name: "Back and safety protection", brand: "Dainese", img: "../assets/back_protection.jpg", price: '100' },
  ]

  var ArticleList = articleData.map((article, i) => {
    return (<View  style={{ width: '47%', margin: 5 }}>

      <Image source={{uri: article.img}}  style={{ height: 250, width: 200}} />
      <View style={{ flex: 1, flexDirection: 'row', marginTop: 5, justifyContent: "space-between" }}>
        <Text style={{ fontWeight: 'bold' }}>{article.brand}</Text>
        <FontAwesome name="heart" size={20} color={colorLike} />
      </View>
      <Text>{article.name}</Text>
      <Text>{article.price}€</Text>
    </View>
    )
  }
  )
array.prototype.map react-native image
2 Answers

You could try add require in to the articleData like this

 { name: "Textile motorcycle jacket", brand: "Dainese", img: require("../assets/Jacket.jpg"), price: '200' }
user_148958820

You can use 'require'

 <Image source={require(article.img}  style={{ height: 250, width: 200}} />
user_141527610
Related