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

Question

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

Can · Accepted Answer · 2020-12-27 11:36:23Z

4

You could try add require in to the articleData like this

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

edited Dec 27, 2020 at 11:36

answered Dec 27, 2020 at 11:28

Can

562 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user14781783 Over a year ago

Thanks it works ! , I also change my import <Image> from react-native-element to react-native.

MahmutCan · Accepted Answer · 2020-12-27 10:40:28Z

1

You can use 'require'

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

answered Dec 27, 2020 at 10:40

MahmutCan

312 bronze badges

2 Comments

user14781783 Over a year ago

Thanks for your answer ! As I explain in my previous post, I tried to use 'require' and it's work but only for ONE line of my array, not for all of my datas. As I read in react native documentation ' require' is expecting a string so <Image source={require(article.img)} is not working. Any other idea ? I was thinking it may be a conflict between react native and react native element ( I'm both using it )

MahmutCan Over a year ago

use require in dummy data, for exaple; { name: "Goretex / waterproof pants", brand: "Dainese", img: require("../assets/pants.jpg"), price: '150' },

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related