I was trying to load image from local resource whose format is .JPG. But every time it gives me following error.
Do react native support .JPG format ? Can anyone help me on this ? Thanks...
If you are sure that your image_path is right then you could rename the Image in your folder from the capital letters (.JPG) to lower case letters (.jpg).
Tested this case for Windows and could reproduce and fix it with the above solution.
react-native version: 0.23.1
For clarification:
var yourPicture = require('./yourPathToYourPicture/picture.jpg); //Working
var yourPicture = require('./yourPathToYourPicture/picture.JPG); //Not-Working
Solution to solve the capital letter problem: Save your picture in your project folder with lower case letters yourPicture.JPG -> yourPicture.jpg
Use your image
render(){
return(
<Image source={yourPicture}/>
);
}
You must use Image from react-native
import {
Image,
} from 'react-native';
...
Image have a prop called source
<Image source={require('./img/fotofondo_app.jpg')}/>
If the error still, try to execute react-native run-android beacuse the image files aren't read in hot.
Related
What I want to do is let a user save an image and when they're accessing their accounts I want the image to display.
What I'm currently doing is I'm saving the images in public folder
Store the path to the database
Path: css\img\myPic.jpg
Display the image
<img class="border" src='esc($empInfo['img'])' style="height: 200px; width: 200px">
But since this is a public folder I can't save personal pictures in this folder
I also tried saving the path to writable\uploads\myPic.jpg but no luck
If you look for a manual or a concept , you can also try this:
You must have some folder where you store all personal images
When user needs it, copy the file into Public folder with a random generated 32 character name (GUID type) but with the original extension.
Then feed it to the user in the view.
Once displayed after the view is called you can delete the image from that folder.
As of the the moment. the solution that I got is "copying" the file(in my case it is an image file)from writable/uploads to public using Publish Library.
$publisher = new Publisher(WRITEPATH . 'uploads', FCPATH. 'img/');
$publisher->addPaths([
'img/myPic.jpg',
]);
$publisher->copy(true); // `true` to enable overwrite
Source Path: WRITEPATH . 'uploads'
Destination Path: FCPATH. 'img/'
Source File: img/myPic.jpg
Now you can ref the image in img tags.
Next step should be replacing/deleting the image after use, because this is not gonna be different when you upload the image at public folder. Will try to update if I found a solution
Source: https://codeigniter.com/user_guide/libraries/publisher.html
PS. Feel free to correct me :) I am also new to web developing in general
Part2: I added this to my function. what it does is after copying the image to the public folder I then rename to 'myPic.jpg'. this will solve my previous problem "replacing/deleting the image after use".
$renameFile = rename(FCPATH. 'img/'.$fileName, FCPATH . 'img/'. 'myPic.jpg');
if($renameFile){
return true;
}
else{
return false;
}
im trying to look inside an epub file in react native expo.
nothing i did works.
tried JSZip, which said 'Can't find end of central directory '
tried 'react-native-zip-archive' which didnt work.
tried to change file name also to zip , and then extract , but didnt help.
JSZip.loadAsync(targetPath).then(function (zip) {
Object.keys(zip.files).forEach(function (filename) {
zip.files[filename].async('string').then(function (fileData) {
console.log(fileData) // These are your file contents
})
})
})
any ideas ?
2020-01-29 20:32:22.470194+0300 Myapp[8905:2391245]
-canOpenURL: failed for URL: "file:///private/var/containers/Bundle/Application/146EA027-7A**/Myapp.app/assets/src/assets/policy.html" - error: "This app is not allowed to query for scheme file"
I am getting this error on xCode console output on real device. On simulator, everything works fine.
Here is my simple full code:
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
const PolicyHTML = require('../assets/policy.html');
export default class PolicyScreen extends React.Component {
render() {
return (
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
);
}
}
Couldn't find much solution about that online, what am i missing ?
The solution for me was just add originWhitelist={['*']} in the <WebView> component and then iOS would load HTML correctly.
I was having the same issue, i am using webview and wanted to load my local html file in that webview, which works perfectly fine in Android but was not in IOS device. After a lot of research i ended up with the following solution.
I have placed my html file in the following path:
MyReactNativeProjectFolder>app>views>monthly>trip.html
Where monthly is my custom folder that i created myself and has a local html file called trip.html.
And in the view, lets say MyView.js, where i want to call my html file i used the following syntax:
<WebView originWhitelist={['*']} source={require('./monthly/trip.html')} ref={( webView1 ) => this.webView1 = webView1} />
MyView.js is in the follwing path:
MyReactNativeProjectFolder>app>views>MyView.js
If you are not getting any error on simulator then this shall fix your problem, otherwise try changing the html file path as I have mentioned above, that is in the views folder, and try again.
I hope this may resolve the error Unable to open URL file:///private/var/containers/Bundle/Application/146EA027-7A/Myapp.app/assets/src/assets/policy.html
I don't know is this can be considered as proper solution but here how i solved it;
I am not sure but as my thinking Xcode is not allowing some codes on html files, so I thought about that found some websites on google which converts to html files to 'clean html file' and removes the unnecessary codes. After cleaning I replaced the new clean file with old one and it worked.
Hope it helps (Especially in Privacy Policy Files).
I am currently developing a Meteor React app, which is using the ostrio:files package to store audio files in a collection named Files. In another (regular mongo) collection, I am using the following code in the transform function to "join" the document with the link to the audio file:
transform: function(doc){
let curAudio = doc.audio;
let audioFile = Files.collection.findOne({_id: curAudio.file_id});
if(audioFile){
curAudio.audioLink = Files.link(audioFile);
curAudio.audioLength = audioFile.meta.length;
curAudio.audioSize = audioFile.size;
doc.audio = curAudio;
}
return doc;
}
This seems to work just fine, as the resulting audio.audioLink is something like
http://localhost:3000/cdn/storage/files/8Q7WwEXyJSkNWwFQa/original/8Q7WwEXyJSkNWwFQa.m4a
But when I try to do something like this
<audio controls preload="none" style={{width: "480px"}}>
<source src={track.audioLink} type="audio/mp4"/>
<p>Your browser does not support HTML5 audio.</p>
</audio>
To be able to play the file, everything works until I click the play button of the HTML5 player. Then, chrome outputs to the console, that the server returned 404 when the file was supposed to be loaded. I tested putting the link into the adress bar, here the server response is just
File Not Found :(
Does anyone have an idea how to fix this?
I found the answer:
My local Ubuntu installation was apparently configured to store uploaded files in /tmp, which didn't caus problems until I restarted the system or cleared my temporary files otherwise. Having the server recreate the DB fixed the problem.
I can get the react-native-camera module to access the camera and save an image. However, I can't figure out how to display this image to the user.
What I'm trying:
Here I take the picture. This generates what looks to be a .jpg file in assets-library://....
_takePicture() {
var self = this;
this.refs.cam.capture(function(err, data) {
this.setState({photo: data});
console.log(err, data);
// data is "assets-library://asset/asset.JPG?id=########-####-####-####-##########&ext=JPG"
console.log('just took a picture');
});
}
However, If I try to render the image:
render: function() {
return(
<Image style={styles.image} source={{uri: this.state.photo}}/>
);
}
I get this error:
No suitable image URL loader found for assets-library://asset/asset.JPG?id=.......
How can I take a photo, save it to the current state of my application, and render it?
The solution was to enable the save to disk option vs. the save to cameraRoll option:
<Camera
captureTarget={Camera.constants.CaptureTarget.disk}
// Rest of Camera options here
/>
So, I was using the #YPCrumble answer for some time.
But now I have to save the image in my camera roll.
If anyone want to continue saving in camera roll, you have to manually link RTCCameraRoll library.
Documentation to link library here:
https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking
It is so simple:
You can find the RCTImage.xcodeproj in your
node_modules/react-native/Libraries/CameraRoll
Drag and drop this file inside Libraries folder in your XCode project.
After that, click in your main project, and find in the right pane
"Build Phases".
Inside "Link Binary With Libraries", drag and drop the file called
"libRCTCameraRoll.a" from left pane -> Libraries ->
RTCCameraRoll.xcodeproj -> Products