Image not showing in some react routes - reactjs

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 😑😑

Related

Daynamic routing page in not coming, when use browser back button in next js

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.

React SPA using react router on S3 with Cloudfront. Can't refresh or direct load link

I have a React SPA app that is on AWS S3 and I'm using Cloudfront. I was getting 404 errors if I refreshed or attempted to directly load any URL other than the root. I have read on other answers that I need to set up a custom error message on Cloudfront to redirect to index.html and show 200 OK.
I have done that and I am no longer getting the error message but now I just get shown a white screen. From what I have read this fix seems to work with everyone that has tried it. Does anyone know what I might be doing wrong or how I can fix it?
You have to let the index.html page handle direct paths such as example.com/path in your cloud front as well, you can do this by adding your custom error response in the cloud front.
Click the ID of your newly created distribution to reach its settings page, then click on the Error Pages tab. Select Create Custom Error Response.
Select Yes for a custom error response, set/index.html for the response page path and 200: OK for the response code. This custom error page in the CloudFront distribution is analogous to the Error Document on the S3 bucket (and will work on IE, too). When done, click Create.

Image is displaying on browser but not in reactJS <img>

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

How do I find Image resource while doing web performance test

I am creating Web performance test for an Angular Application using Visual Studio, which contains image logo. I’m receiving an error like: “No resource found” related to that image logo after recording its web URL, while testing that URL as shown in the below picture. Can you give any suggestion for this problem?
From what I can see, you have the link to the image as
app/home/app/assets/images/AzureAppServiceLogo.png
notice that app is in the absolute path twice, and this is probably what's causing the 404 error.
Let me know if this resolves the issue

Jade expression to render image from url sends another request to the server

I have a jade file, where I parse the user data and construct the page. There is a place in this file where I loop through the users' images and render them to the page:
.picture-item(ng-repeat='m in userProfile.media')
img.picture(src='{{m.mediaUrl}}')
But the problem is, even though this line of code shows the image on the page, it send another request to server like below:
http://localhost:3000/%7B%7Bm.mediaUrl%7D%7D
This happens on: http://localhost:3000/profile page. If I go to a user's profile, let's say: http://localhost:3000/profile/some_username, then the code above sends a request like:
http://localhost:3000/profile/%7B%7Bm.mediaUrl%7D%7D
m.mediaUrl are user's instagram image urls.
What could be the problem here? Any ideas?
Thanks in advance.
You are running into a known issue with AngularJS client side late binding.
You can use another attribute for the img tag instead:
https://docs.angularjs.org/api/ng/directive/ngSrc
.picture-item(ng-repeat='m in userProfile.media')
img.picture(ngSrc='{{m.mediaUrl}}')

Resources