how to display the url of a picture of an item from my sql database in react native?-CodePudding

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 datas (from phpmyadmin) of that shop only and display the details. the name, adresse, phone number, etc all work but the picture.

i created a colomn image where i stock 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>

so i then tried with an object called pharmaimages (it's basically just the url itself that i stocked 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

CodePudding user response：

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>

CodePudding user response：

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

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