I have images on a DigitalOcean space, but my problem is that when I want to display the image in reactJS inside a img tag as follow:
const search =
'https://wantedoffice.dev.bucket.ams3.digitaloceanspaces.com/smartphone.png';
.......
<img height="80px" src={search} />
it doesn't display the image but this:
sometimes it works it's really weird, but I need this to work everytime !
When I copy/paste the image url in a browser it works so I don't understand, you can try to copy/paste this url in your browser https://wantedoffice.dev.bucket.ams3.digitaloceanspaces.com/slide_inspiration.png
Image is well public in DO space and accessible.
I think it comes from react and not from Digital Ocean space, Can you help me ..?
This image has an issue from server config so that its not render in your code, for example if you change the url to another server you will see the image result:
<img src={"https://i.ibb.co/28cc7z4/slide-inspiration.png"} />
This will work, but when I use your image you will receive this error:
(failed)net::ERR_CERT_COMMON_NAME_INVALID
And this error refer for more than one resone, but base on your link and when I try to visit it via browser, I see an issue on SSL certificate, so that I cant access image else if I press on advance button and click view image...
so what you can do is:
Ensure the Domain Has the Correct Certificate Installed
Check for Redirects and WWW vs. Non-WWW
Check for Misconfigured Redirects
Related
I want to display user profile picture to get image name from db. I am writing code like this
I am getting image variable from api userData?.picture
<img src={require(`../../assets/img/userprofileimages/${userData?.picture}`)} />
But my app stop to work nothing dispaly. can any one help please
In a Next.js project, I am coming across a situation where I get a new URL path from an API. And I have to update that URL path in the browser without reloading that page.
I am doing that with the help of History.pushState()
window.history.pushState(nextState,nextTitle,nextURL);
window.history.replaceState(nextState,nextTitle,nextURL);
With help of History.pushState() I am able to update the URL in the browser without reloading that page. But If after I change that URL multiple times and change to some other page. Then if I start pressing the browser back button, I am not able to get that page with the last URL path showing in the browser.
Only that last URL path shows up in the browser URL input, but that page data is not reflected.
Attaching the sample code and reproducing steps video link below. Any help and suggestions are appreciated.
Source Code
Codesandbox
Reproducing Steps
I am also facing same problem, after using history.pushState() browser back button will not work in that page, because according to browser you never went to that page.
That location doesn't exists in JavaScript history object.
Hey I have a weird issue in react images. Some images are not showing and some are showing.
This is my simple implementation:
<img src={item?.media?.url} />
and when I check the console and then copy the src, the image opens normally. So the url isn't the problem
Looks like you're trying to hotlink an Instagram image.
You can try downloading the image and then displaying it, or you can just embed the Instagram post
It seems your URL is broken, cause the way your using it is correct, make sure by clicking on the link, a new tab should open showing the actual image
And make sure the extension of the image is being added, cause on the image that you shared, there is no valid image extension in the URL (.png, .jpg, etc..)
am working on a project were on can make a post with image but when ever i try to view a single post both the user profile and the post image do not show up and i get this server error.
http://localhost:3000/post/uploads/1577964281132Screenshot_20200102-
104724.png 404
but am able to view it on this route.
http://localhost:3000/uploads/1577964281132Screenshot_20200102-
104724.png
on my express server i have this
app.use('/uploads' , express.static(path.join(__dirname , '/uploads')));
please is there any solution......
I did get the answer to problems all I had to do was had a forward slash(/) to the image src value 😑😑
So I am having a really weird problem. I'm not sure if it's my server thats is causing the problem or it's my react code. Right now I am trying to load an image using this code in my app:
<Image style={styles.image}
source={{uri:'http://www.test.com/admin/images/profile/'+this.props.active.bid+'.jpg'}}
/>
The link is a correct link and image displays if you go to the actual link, however in my app it doesn't display the image.
The file permissions on the image are 644 and I have 1 image working, however whenever I try to remove that image from the server or rename it to be the correct image for the 2nd profile it still shows up for the 1st profile and not the 2nd. If I delete the image the app still receives it for the 1st profile even though it shouldn't show up, if I go to the weblink the image doesn't appear.
Does anyone have any ideas?
To fix this problem you just have to reset the simulator.
To do this go to Simulator - > Reset Content and Settings...
This deletes all of the data on the device so beware if there is something on there that you cannot restore.