Question 33187 in React native Question posted in
The official React Native documentation can be found here.

How to display the url of a picture of an item from my SQL database in react native?

I’m trying to display the picture of a shop in a single-shop page after clicking on said shop on the shop-list page.

Once I clicked it takes the data (from phpmyadmin) of that shop only and display the details. The name, address, phone number, etc all work but not the picture.

I created a column image where I store the url that leads to the picture located in my assets folder of the react folder.

But I tried just with url to see if the Image balise would work… AND IT WORKED :

<View><Image style={{resizeMode : 'cover'}} source= {require('../../../assets/picture1.jepg')} /></View>

I then tried with an object called pharmaimages (it’s basically just the url itself that I stored in my database with the ” included) but it says invalid. I also tried with the propriety uri but it’s even less clear.

<View><Image style={{resizeMode : 'cover'}} source= {require(pharmaimages)} /></View>

in my mind it makes perfect sense but it just doesn’t work

Tags:

2

Answers


  1. 0

    Try storing it as require('../../../assets/image.jpeg') in the database. Fetch the data and then once you map it or whatever you do in your app, show it using the following code:

    <View>
   <Image style={{resizeMode : 'cover'}} source={image} />
</View>
    Login or Signup to reply.
  2. 0

    This is one of the common issues, that most of developers got into.

    The other answers may also right, But to be more precise I am adding my comments on this Question.

    Actually, the require statement will never evaluate value we are passing as parameter, It will directly look for the path we are providing into it, also It is working in same way like we are importing other libraries or Components.

    So if we provide dynamic value at run time with require we may fail to see expected behaviour.

    Here, I am also attaching some important links which might help you to understand clearly.

    Links:

    React Native Official Image Doc

    Same issue related thread on Stackoverflow

    WORKAROUND

    To go with workaround for this kind of situation you can directly store your file paths with require function in your data storage.

    for ex.

    Instead of storing path like ‘../../../abc/def.png’

    Store value as require(‘../../../abc/def.png’)

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

Back To Top
Search