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
Related
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' }}
/>
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'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 just using the out of the box "GeolocateControl" component from react-map-gl and it works perfectly on my pc. However on my phone when I press of the geolocate button nothing happens? My browser in mobile has permission to access location but no pop-up shows like on pc asking for permission to show location. I've tried using Chrome, Firefox and the default browser.
I've tried using Chrome, Firefox and the default browser. On my iPad it doesn't work either, only on my pc it's functioning properly.
<ReactMapGL
{...viewport}
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
onViewportChange={viewport => {
setViewport(viewport);
}}
>
<GeolocateControl
className={classes.geolocateStyle}
positionOptions={{ enableHighAccuracy: true }}
trackUserLocation={true}
/>
</ReactMapGL>
Expecting it to bring me to the current location and put a blue marker on screen as it does on pc.
I have a small Backbone app. In my navbar I have an image. Here is the code:
<a href="#" >
<img src="../app/img/isxLogo.png" width="56" class="navbar-brand">
</a>
This shows up fine when I am in developement. When I push to Heroku, I get a 404 not found error.
Request URL:http://intense-zzzzzz-1111.herokuapp.com/app/img/isxLogo.png
Request Method:GET
Status Code:404 Not Found
What could be causing the 404? Why would the image be found in dev but not when I push to Heroku?
Image now showing
I changed the path to /img/isxLogo.png and it will now show in Heroku, but it does not show in my dev environment. Why does the path change? How would you show the image in both environments?
On your local machine, the root directory set by your web server must be set to the directory above where you app is.
Change the URL to /app/img/isxLogo.png and it should work.
What are you using to serve the app locally?
I would recommend using the same web server/method locally if you aren't already to avoid any surprises like this :)