Question 136759 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Simple image url not displayed on React Native

I can’t figure out why the image from the following address doesn’t display on React Native:

Url: https://firebasestorage.googleapis.com/v0/b/desire-app-e9e94.appspot.com/o/profile%2Fguest-user.webp?alt=media&token=fe99fdf9-d36a-4548-b295-cc2fdce79f64

The url is generated through the firebase storage function, if url is entered in the browser it is displayed correctly, but I don’t understand why it is not displayed inside the image component

My code:

<Image
      source={{
        uri: 'https://firebasestorage.googleapis.com/v0/b/desire-app-e9e94.appspot.com/o/profile%2Fdefault_user.svg?alt=media&token=cd6fed4a-86da-4c52-bad7-7f8f0d83fd3a',
      }}
      style={{width: 200, height: 200}}
/>

Can anyone tell me the reason?

Tags:

2

Answers


  1. 0

    You need to install webp package for display webp images.

    Run these below 2 commands, then after you should be able to display the images.

    npm install --save react-native-webp

react-native link react-native-webp
    Login or Signup to reply.
  2. 0

    <Image
    source={{
    uri: ‘https://firebasestorage.googleapis.com/v0/b/desire-app-e9e94.appspot.com/o/profile%2Fdefault_user.svg?alt=media&token=cd6fed4a-86da-4c52-bad7-7f8f0d83fd3a’,
    }}
    style={{width: 200, height: 200}}
    />
    The url which you kept in this source is not same as what you mentioned, your url is incorrect in <Image tag, copy and paste the url correctly and your image will display,

    try this,
    <Image
    source={{
    uri: ‘https://firebasestorage.googleapis.com/v0/b/desire-app-e9e94.appspot.com/o/profile%2Fguest-user.webp?alt=media&token=fe99fdf9-d36a-4548-b295-cc2fdce79f64’,
    }}
    style={{width: 200, height: 200}}
    />

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search