CODEWITHSUNDEEP
jsonreact-nativeexpo
Manasvi Dobariya
Manasvi Dobariya

Reputation: 67

Image not Showing React native Expo

React Native Code

<View style={styles.container}>
      <View style={styles.carlist}>
        {api.map((item, key) => (
          <View key={item.brand} style={styles.photo}>
            <Text>{item.brand}</Text>
            <Image source={{ uri: item.logo }} />
          </View>
        ))}
      </View>
    </View>

JSON file Data

    {
    "brand": "Volvo",
    "logo":"https://1drv.ms/u/s!AiyE3dAIjI8lgRtQot0nBaNTeCLb?e=O2r7fz",
    "models" :[
        {
            "name":"XC90",
            "link":"https://1drv.ms/u/s!AiyE3dAIjI8lgV6XcQOmso1W2rta?e=wXTM4d"
        },
        {
            "name":"XC60",
            "link":"https://1drv.ms/u/s!AiyE3dAIjI8lgWjRXFT6G9NEzbS4?e=ELJ4HZ"
        },
        }

The URL is supplied correctly but the image does not appear on the screen. Images are stored in one drive. I have tried with images on the internet as well but none of those appear on the screen. I want to take JSON data and display it in grid form if any content that helps with that would be helpful as well. Expo Documentation shows it to be like this but in loop it does not appear.

Upvotes: 2

Views: 12853

Answers (2)

ofir_aghai
ofir_aghai

Reputation: 3311

you should add header 'accept':

<Image source={{ uri: userInfo.picture, headers: { 'Accept': 'image/*'} }} style={styles.profilePic} />

as shown in docs

Upvotes: 3

Kartikey
Kartikey

Reputation: 4992

The image you are trying to load needs an Authorization. Yes, it will show up if you paste the URL in the browser but for the Image component you need some kind of Authorization from OneDrive. That's the reason it's not loading.

Read More about Image Headers here

And also make sure you provide Dimensions to the images in order to show them. As mentioned in the docs here, Unlike with static resources, you will need to manually specify the dimensions of your image.

For Example -

<Image source={{ uri: SomeURI }} />
// This will not load and the image would not be shown.

<Image source={{ uri: SomeURI }} style={{ width: 100, height: 100 }} />
// This will load perfectly and the image will be shown.

Working Example Here

Upvotes: 7

Related Questions