I use image, like this:
<Image source={{uri: 'http://exmple.url/image.png'}}
style={{
width: 60 ,
height: 60 ,
}}
resizeMode={"contain"} />
Image is not shown. But if I paste any HTTPS URL Image is shown. What's wrong?
You will need to enable arbitrary load in info.plist of your ios project. By default ios don't allow http requests. See my earlier similar answer
Related
I have to show a placeholder image before more images arrive following a network request. How can I transform the url (ex: https: //upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png) into base64? is there a react native library that shows a placeholder image and then transforms it into base64? if there is no library showing a placeholder image, how can I transform a url (eg: https: //upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png) into base64? I've tried using RNFetchBlob but from what I've read around it's not supported by expo.
<View style={ styles.container_image}>
{this.state.image && <Image
source={'how get url placeholder and then transform it into base64??' } style={{ width: 200, height: 200 }} />}
</View>
currently react native doesnt support any fallback / placeholder image.
What you can do is , you download a placeholder image, and display that till the time your api returns an image.
For example
const ImageComp = () => {
if(netWorkLoading){
return <Image source={require('../ your local image')} />
}
return <Image source={{uri:response.url}} />
}
Hope it helps. feel free for doubts
I'm trying to import local images in my react native app, by using the "require" keyword, but everytime I use require I get a 500 response code from the development server.
<Image key={value + "1"} source={require("./giantdoubble.png")} style={{height: 100, width: 100}}/>
<TouchableOpacity onPress={() => alert(value)} key={value} style={styles.card} >
<Text>xD</Text>
</TouchableOpacity>
For some reason my PNG file used PNG with all caps, which made it unrecognizable by the code. Converting it to a png with lower case characters resolved the issue.
Trying to display an image within a WebView in ReactNative (Using Expo). Doing this to allow image zooming.
Using webview with source={{ uri: this.state.imageUrl }} which is an s3 bucket image location. ie-- ending in .jpg
I have set mixedContentMode to 'always' as is suggested by people with similar problems, along with setting javascriptEnabled and domStorage to true, setting style to flex:1 etc etc.
My android is displaying a white page only, but iOS displays the image just fine, so url is not the problem.
I know RN advertises Webview as being soon to be deprecated and to use react-native-webview. But as we use Expo this isn't an option as linking is required to use react-native-webview which cannot be done with expo.
Is there something I have missed with s3 buckets or has anyone else had a similar issue they have managed to solve this issue? Not sure what else to try, have used the trick with google drive prefix elsewhere in the app for displaying PDFs in the webview but that doesnt work in this case. And using mixedContentMode hasn't solved anything.
<WebView
source={{ uri: this.props.map.source }}
startInLoadingState
javaScriptEnabled
style={{ flex: 1}}
scalesPageToFit
javaScriptEnabled
domStorageEnabled
originWhitelist={['*']}
mixedContentMode='always'
/>
and example of the image url is 'https://example-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:example/public/image-hd-1.jpg'
just showing the format.. above url will not work
In the end I just used the WebView and inserted my own html with an img tag that references the exact same image url. This seems to work just fine and gets around what ever issue was occurring with referencing the image directly.
Would still like to know if anyone has gotten around this without having to perform different renders for different operating systems.
Did you try to wrap it in view? Because in my one of an old project I solved it like this
<View style={{flex:1}}>
<View style={{height:'100%',width:'100%'}}>
<WebView
source={{ uri: 'https://github.com/facebook/react-native' }}
scalesPageToFit={true}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
originWhitelist={['*']}
mixedContentMode='always'
/>
</View>
</View>
Here is the Snack Link
blurRadius seems to be working on images loaded from remote URIs, but not ones that were loaded from my local assets. Any ideas on why this is?
This can be a version issue or any type of styling error because i have tried blurRadius on many of my local assets and it worked as expected.
Make sure syntax is correct:
<Image
source={require('./image.png')}
style={{ width: 200, height: 200 }}
blurRadius={0.2}
resizeMode='contain'
/>
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'}