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
}
Related
I'm building a website with Next.js and Mantine. I want to put the Image with my logo in my Header so I used Image from next/image but the problem is that it's not working when i deploy it. It works perfectly on localhost.
Deployed:
Locally:
Code of my image that is clickable
`
<Link href={"/"} >
<Image src="https://cdn.p33t.net/ZKAVDSZEFH.png" alt='logo' width={42} height={40} />
</Link>
`
I tried using the local image but it was same. My image host is already added in the next config.
I expected it to be working same as on local machine
I fixed it by using Image component by Mantine instead of Next
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 am building a project with Next.js and Strapi as CMS, the images are hosted on Cloudinary.
My problem is that the SVG image doesn't display using Image tag from Next.js.
I already read this topic Can't import SVG into Next.js but it's for locally stored images and doesn't seem to work for remote hosted SVG images.
My build is in Gatsby with Forestry.io as CMS and images hosted on cloudinary, but but my issue was solved by adding the fl_sanitize flag mentioned in this article from cloudinary support.
I know this is a bit old but stumbled across this post
I put out a Cloudinary integration for Next.js that wraps the Image component and you're able to handle this nicely
Next Cloudinary: https://next-cloudinary.spacejelly.dev/
Given an asset cloudinary-logo-blue that's uploaded as an SVG:
<CldImage
width="500"
height="96"
src="cloudinary-logo-blue"
format="svg"
/>
Hope this helps!
I am developing mobile app using React Native Expo. I am using react-native-google-places-autocomplete for text auto completetion of location/places. It is Google API. I have made account, enabled the google service and also added my billing info. But the code is not working .
See the code below:
<View style={{height: 500}}>
<GooglePlacesAutocomplete
fetchDetails={true}
placeholder='Search'
onPress={(data, details = null) => {
console.log(data, details);
}}
query={{
key: 'my-api-key-here',
language: 'en',
}}
/>
</View>
I am able to SUCCESSFULLY see the Search placeholder where I can type, but I am not able to see the suggestions/autocompletion text by google. I am able to type the location successfully in the box, but there is no location suggestions coming by google.
I have installed and imported relevant libraries too.
You need to add prop listViewDisplayed={boolean or "auto"}. See this link https://snack.expo.io/#tobzy/react-native-google-places-autocomplete-example
Had this happen to me too. Just had to add flex: 1 to my View as I didn't provide any height styling like OP.
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'}}
/>