I'd like to display an image in a React Native app from 'cdn.weatherapi.com/weather/64x64/day/116.png'
this is what I'm trying at the moment but it isn't working:
<Image
style={styles.image}
source={{ uri: 'cdn.weatherapi.com/weather/64x64/day/116.png' }}
/>
This code works with other images like 'https://simgbb.com/images/logo.png' for instance. Also, 'cdn.weatherapi.com/weather/64x64/day/116.png' works in a browser, so the image does exist.
thanks for the help
Make sure to include the protocol, and also ensure that the protocol is HTTPS not HTTP. The walled garden SDKs of Apple etc require adding extra perms for loading a non-HTTPS resource from a remote location.
<Image
style={styles.image}
source={{ uri: 'https://cdn.weatherapi.com/weather/64x64/day/116.png' }}
/>
Related
I have a react native expo project. In this project I have a image component. I have also a another server which is running on localhost:3000 (php server).
<Image source={{uri: "https://media.istockphoto.com/photos/straight-down-above-tall-towers-rising-over-austin-texas-picture-id1320415956?s=612x612"}} style={{width:100,height:100}} />
Everything works fine, but when I changed to url to load image from "localhost:3000". Image is not showing.
<Image source={{uri: "http://localhost:3000/uploads/avatar/user-1.jpg"}} style={{width:100,height:100}} />
But both image url is right and works in a browser.
The localhost changes depending on where you're running the app.
To get the image, your app needs to target the address of the device the server is running on, and not the address of the device the app is running on.
If the device your app is running on is on the same wifi as the server, try targetting through your IP address:
<Image source={{uri: "http://192.168.1.123:3000/uploads/avatar/user-1.jpg"}} {...rest} />
Check this article to find your IPv4
I'm using next/image for my images on my site. All my images are being served through prismic and I've added the cdn domain to my next.config file.
This is how I'm using the component
<Image
src={image}
alt={title}
width={600}
height={450}
layout="responsive"
loading="eager"
/>
Every image is loading perfect, except for one. I'm getting a 404 despite all the images coming from the same source. When I replace next/image with a normal img tag it works fine. I'm not sure how to debug this. Any advice.
I've checked several similar topics in Stackoverflow but I didn't find my answer.
I have this component which is meant to show profile images in my app. I am serving images in my node server and it works just fine in the browser. It means when I open the link with the browser image is shown in my browser. it also works fine with my react web app.
in the react native app it is not shown, though.
I tested some other links from different sources and it works fine.
But the image links from my API end does not work in the react native.
<Image source={{
uri: 'https://mentalwill.xyz/API/ProfileImages/21190169ANDREW-NG.jpg' ,
}} style={styles.profileImage} />
and the style:
profileImage:{
width: 200,
height:200,
borderRadius:100,
marginTop:50
}
I'm using react-native, and everything was working well while I was developing, but, when I built the APK (using this tutorial: https://facebook.github.io/react-native/docs/signed-apk-android.html#content) and installed it on my device,
the flat list don't show any data
everything is working well the login screen connect to api the loged in
so the api work well
so why the flatlist don't show any data
. Did anybody had the same issue?
componentDidMount() {
this.props.getCoffeeCategory()
}
//flatlist code
<FlatList
style={{ flex: 1 }}
showsHorizontalScrollIndicator={false}
horizontal={true}
data={this.props.data}
renderItem={this._renderListItem}
keyExtractor={item => item.id}
/>
this is work with me
https://stackoverflow.com/a/56801525/7483108
In my case, I call api with non secure (http instead of https). So api work well for debug environment, but not work for release. You can add this line
android:usesCleartextTraffic="true"
to AndroidManifest.xml
like that
<uses-permission android:name="android.permission.INTERNET" />
<application
...
android:usesCleartextTraffic="true"
...
I am building an app where user will be able to play facebook videos from urls that I will provide.
Is there a way to embade facebook videos in react-native from url?
I have tried using react-native-video, react-facebook-player
React-facebook-player only works in react app. In react-native it gives an error that can not resolve div.
Can I wrap react-facebook-player component within Webview?
If so how can I do that?
Use react-native-webview
eg:
<WebView
style={{height: videoHeight}}
source={{uri: 'https://www.facebook.com/video/embed?video_id=VIDEOID HERE'}}
/>