I am trying to show images fetching from api. and to show images from localhost laravel project. Running my emulator on Genymotion. how do I do that?
Online images are working like fb fevicon. and I am not using the localhost:8000 link for images as I am testing on Genymotion
// URL to fetch apis
export const URL = 'http://10.0.3.2:8000';
// Showing/Displaying my image in React native
if(list && list.length > 0) {
const listAfterPictures = list.map((item, index) =>
<Image
key={ index }
source={{ uri: URL + index.image_name }}
style={{ width: 300, height: 300 }}
/>
);
return (
<View>
{listAfterPictures}
</View>
)
}
I also tried to put width and height in source like:
<Image
key={ index }
source={{ uri: URL + index.image_name, width: 300, height: 300 }}
/>
Any Suggestions?
Please console log URL + index.image_name and check if all back slashes are there. And make sure to include the file extension e.g .jpg .png
Related
I'm learning React Native by building an app that takes a picture and shows the image in a gallery.
I'm using react-native-vision to take the photo and react-native-fs to access the temporary file as suggested in this answer and use it as the uri of <Image/>
However, the View that should display a list of </Image> it's showing a blank space
This is my code:
// saves photo on Array and closes the Camera View
const onPressButton = async () => {
console.log(cameraRef.current);
console.log(123);
const photo = await cameraRef.current.takePhoto({
flash: 'off',
qualityPrioritization: 'speed',
});
console.log(photo);
setPhotos([...photos, photo]);
setShowCamera(false);
return;
};
// how I'm trying to render the photos
{photos && photos.length > 0 && (
<View style={{width: '50%', height: '50%'}}>
{photos.map((photo, index) => (
<View key={index}>
{console.log('file://' + DocumentDirectoryPath + photo.path)}
<Image style={{maxWidth: 10, maxHeight: 20}} source={{uri: 'file://' + DocumentDirectoryPath + photo.path}} />
</View>
))}
</View>
)}
This is how it looks:
Is there something wrong with my code?
Thanks for the help.
There are 2 potential errors in your source code.
Photo taken by react-native-vision is chached. (photo.path look something like this: /data/user/0/your.app/cache/mrousavy6472....jpg) So do not use DocumentDirectoryPath, use just source={{uri: 'file://' + photo.path}}
Second potential error is Your photo is not shown because he is hidden from view. Try to set style like this: style={{width: '100%', height: '100%'}}
So in final look like this:
<Image style={{width: '100%', height: '100%'}} source={{uri: 'file://' + photo.path}} />
I'm trying to render images in react native from my local dev server, but I'm not able to shoe images. The image URI I'm getting from the server is a proper one I checked that with copying and pasting it to the chrome tab and it opens up with a new tab showing the image.
http://localhost:4001/f931a2c2-4268-4bd8-8f6f-c0bab923a374.jpeg, this is the example of the URI, and this is my image component code.
export const LogoImage: React.FC = ({ logo }) => {
return (
<View style={styles.wrapper}>
<Image
source={{
uri: "http://localhost:4001/${logo}",
}}
style={styles.image}
/>
</View>
);
};
const styles = StyleSheet.create({
image: {
height: "100%",
width: "100%",
resizeMode: "cover",
},
wrapper: {
height: 200,
width: 200,
},
});
Any idea and suggestion would be appreciated.
Try replacing the keyword localhost with you own IPv4-address. You can get it by executing ipconfig in cmd. I also found a similar question here.
The same website works absolute fine in android, however in iOS it seems to come up with this message:
Possible Unhandled Promise Rejection (id:11): Error: Unable to open URL about:blank
I also seem to get this when the site URI is linking to URLs from a different domain.
I have tried adding: originWhitelist={['*']}
Here is the Webview code:
<WebView
style={styles.flexContainer}
startInLoadingState
renderLoading={() =>
<View style={styles.container}>
<ActivityIndicator size="large" color="#ffffff" styles={styles.loader}/>
</View>
}
onMessage={event => {
parseWebData(event.nativeEvent.data);
}}
onShouldStartLoadWithRequest={event => {
if (!event.url.startsWith(base)) {
Linking.openURL(event.url)
return false
}
return true
}}
originWhitelist = {['*']}
source = {{ uri: base + uri }}
/>
1st try this one
<WebView
source={{ uri: base + uri }}
style={{ height: 400, width: 400 }}
useWebKit={true}
startInLoadingState={false}
javaScriptEnabled
domStorageEnabled
/>
onShouldStartLoadWithRequest={event => {
if (!event.url.startsWith(base)) {
Linking.openURL(event.url)
return false
}
return true
}}
This was the problem.
iOS treats any URL load with this, whereas Android only fires this on clicking.
See this post for the explanation of the issue:
onShouldStartLoadWithRequest automatically calling in iOS React Native on loading of any url in WebView, How to control it?
I am facing issue with react native image. I have a image which is stored in ios document directory.But i am not able to set the image, i tried everything.
code:
import FileSystem from 'react-native-fs';
<Image
style={{ width: 100, height: 100 }}
source={{ uri: 'file://' + FileSystem.DocumentDirectoryPath + '/profile_pic.png', scale: 1 }}
/>
===>/Users/Syam/Library/Developer/CoreSimulator/Devices/57D480CE-4917-487C-944B-DC38995662FC/data/Containers/Data/Application/67DC3B69-AC9F-4C4C-8064-B77593AC95F5/Documents/profile_pic.png
I am able to see that image is exist in that path
You can use react-native-fs to get directories (which works for ios and android)
var RNFS = require('react-native-fs');
<Image source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/directory/my.png'}} />
In my React Native project folder I have the src files which hold the components, and also some images I want to use across both iOS and Android. If I use this:
<Image style={{ width: 200, height: 200 }} source={require('../images/camera.png')} />
then the image loads perfectly. However, the source in the image tag is going to be created dynamically when the user takes a photo. This code:
<Image style={{ width: 200, height: 200 }} source={{ uri: '../images/camera.png' }} />
does not work. No errors thrown, but no image displayed. I'm sure I'm on the right track as it will return images taken by the camera and stored on the device using the same code when I replace the source with a prop (<Image style={{ width: 200, height: 200 }} source={{ uri: this.props.image }} />) but for the static image it's not happening. Suggestions?
For the static images you need to specify like below source
source={require('static_image_path_relative_current_directory')
Only for remote and local files(not static) we need to specify uri in source like below
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}