I saved an image in a SQLite database in the smartphone as TEXT with the name Path.
I tried saving it in to ways:
require('../assets/icon.png')
'../assets/icon.png'
For the first method, when calling it on an Image component I use it like this:
<Image source={item.Path} />
Its value is for example 10.0 when using console.log to visualize it.
And I get the following error:
Warning: Failed prop type: Invalid prop `source` supplied to `Image`.
But after adding another image, to the database, all the images will load. It doesn't work only when I start the app.
For the second method:
<Image source={require(`${item.Path}`)}
And I get the following error:
Invalid call at line 130: require("" + item.Path)
I have searched but can't find a optimal way to store an image path in the database and later use it in a Image component.
For what I understand here you're trying to use local path of your images from your database inside your react native project. If I'm correct it can't work, you can't use local path of a distant directory, the api only serve the path not the file itself.
What I would do it's using amazon S3 bucket to upload static files, images in your case and you save the url of the uploaded images in your database. Then you call images in your code like this :
source={{ uri: "http://file.jpg" }}
Related
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
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>
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')
I am currently downloading a gltf from Google drive using the Google Drive API. I can print in the console the gltf file as text but I can't seem to be able to parse it and actually visualize it in three.js. I have used GLTFLoader.parse and GLTFLoader.load but both give errors about the json. Is there a workflow for reading files from their content without loading them from a URL?
the response I am getting back from google-drive looks like that:
response body image
Is there a workflow for reading files from their content without loading them from a URL?
Yes. The idea is to directly call the parse() method with the respective content. The three.js editor is using this approach during file import. The normal approach for this is:
const loader = new GLTFLoader();
loader.parse( contents, '', ( gltf ) => {
const model = gltf.scene;
scene.add( model );
} );
contents can be of type string or ArrayBuffer.
React Native : Alternate way to get the Image require to work when array of image paths got dynamically from fetchapi
Tried the below and aware that require always need the fixed path in quotes('') which works well when static image path is known. Thee should be alternate way to map the images which is received from fetchapi.
source={require('./assets/images/'+{item.image_path})}
Example fetch api json response is: [{user_name: 'DynamicUser1', image_path: 'DynamicUser1.jpg'},{user_name: 'TestUser1', image_path: 'TestUser1.jpg'}... ]
Need alternate way to get the images rendered with the dynamic image path rightly picked from the fetch api.
userData = this.state.resultsUserData.map((item) => {
return (
<View key={item.user_name} style={ styles.container }>
<Text style={styles.title}>
{item.user_name}
</Text>
<TouchableOpacity goBack={()=>this.backAction} onPress={()=>this.homepage()}>
<Image key={item.image_path}
source={require('./assets/images/'+{item.image_path})}
</TouchableOpacity>
</View>
)
}
require doesn't work dynamically like that. Since you already have the images in the assets, you should write the require's for each of them in advance and call the appropriate one when needed. You can read more about this limitation here.
I'm building an app with react-native, and I'm trying to use the react-native-fs module to list out a series of images located in the app folder. The images are located in a folder in the app project folder named 'data', so for example if I want to display one of the images, this works:
<Image source={require('./data/boo.png')} />
However when I try to use react-native-fs to list out all the files in that folder like so:
RNFS.readdir(RNFS.DocumentDirectoryPath+'/data')
.then((result) => {
console.log('GOT RESULT', result);
})
.catch((err) => {
console.log(err.message, err.code);
});
I get the error 'Folder does not exist'. Also when I remove the +'/data' the only result listed is a file by the name of 'ReactNativeDevBundle.js', with a path of '/data/user/0/com.awesomeproject/files/ReactNativeDevBundle.js'. Is this the expected behavior? If this is the expected behavior, and I am doing something wrong, how can I access the file folder I want from within the app? Side question, if I wanted to provide that Image tag with an absolute path, what would that look like.
First, are you creating the data folder in running time? or why do you think that's where the files are?
Second,
Also when I remove the +'/data' the only result listed is a file by
the name of 'ReactNativeDevBundle.js', with a path of
'/data/user/0/com.awesomeproject/files/ReactNativeDevBundle.js'. Is
this the expected behavior?
Yes, this is the expected behavior, RNFS.DocumentDirectoryPath goes directly to /data/user/0/com.awesomeproject/files/, this is where you should create the data folder if you want to keep using the same code you currently have
EDIT:
According to one of the contributors of the package: if your folder is within the javascript-space this package won't work.
If you're using android, you may need to put the files into the assets-folder within the android-folder. Then you should be able to use readDirAssets.
I recommend to read Differences between File Source
Excerpt:
Normal Files: These files are created by your app using fs, or fetch API, you can do any operation on these files.
Asset Files: Compiled into the app bundle so generally they're on
readonly mode
I have implemented initFiles to display already s3 uploaded files, but actual image thumbnails are not showing. Also, I can not click on the default thumbnail that is shown (see image). How can I see actual images and link works?
I have below JS snippet
session: {
endpoint: "http://localhost/app/ci/php-s3-server/endpoint-cors.php?filelist"
},
Response from endpoint-cors.php?filelist call is...
[{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png","s3Bucket":"kidkivetest"},{"name":"process_step_2.png","uuid":"e5d84dd7-458c-4601-9168-e16e747134d0","s3Key":"test\/e5d84dd7-458c-4601-9168-e16e747134d0.png","s3Bucket":"xx_my_bucket_xx"}]
S3 bucket structure has 2 images:
All Buckets /xx_my_bucket_xx/test
e3554aa0-c025-4653-bb71-4afe9d979f06.png
e5d84dd7-458c-4601-9168-e16e747134d0.png
If you would like to display thumbnails in your initial files list, you must provide a thumbnailUrl for each file in the list. For example:
[{"name":"art_collage.png","uuid":"e3554aa0-c025-4653-bb71-4afe9d979f06","s3Key":"test\/e3554aa0-c025-4653-bb71-4afe9d979f06.png","s3Bucket":"kidkivetest", "thumbnailUrl": "http://mys3bucket.com/art_collage.png"}...]