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 :)
Related
I am working on the latest nextJS version. I am trying to load images from a Magento CMS. They work fine in local, but on deployment to Vercel, I get not found error
GET https://consumer-omega.vercel.app/a/b/absinthe20teichnnd_vhi6ffkxpdwl9ism.jpg 404
I have already added the domain name of CMS to the domains setting in images under next.config.js.
images: {
domains: ["devconsole.appname.com", "appname-omega.vercel.app"],
}
For reference for debugging, this is the URL that gets requested for in local
http://localhost:3000/_next/image?url=https%3A%2F%2Fdevconsole.appname.com%2Fmedia%2Fcatalog%2Fproduct%2F8%2F2%2F820pm20whisky_c0ihwxvhlkqdbupv.jpg&w=256&q=75
Where as in the deployed environment for, the requested URLs are something like this
https://appname-omega.vercel.app/_next/image?url=%2F8%2F2%2F820pm20whisky_c0ihwxvhlkqdbupv.jpg&w=256&q=75
My frontend is deployed on Netlify. all the get request working well but POST, PULL, DELETE request is not working.
My backend is on Heroku..
Is it CORS problem or else?
Thank you very much.
this is my console after post request
From your linked screenshot, it appears that you're connecting to your API using relative URLs, for example: /api/something. Locally, this would most likely work as you'd most likely have your backend running too.
However, on production this would not work, because browsers will resolve /api/something relative to the domain which is now on Netlify. Since Netlify doesn't have your backend app running, and there is no asset at /api/something, Netlify sends back a 404.
The solution would be to use Netlify Rewrites: https://docs.netlify.com/routing/redirects/rewrites-proxies/. You could add something like:
/api/* https://your-heroku-url.com/:splat 200!
... in a file named _redirects which should be added to the publish folder on Netlify.
This would resolve /api/something to https://your-heroku-url.com/something. You might have to change the redirects based on your configuration.
I did basic movie database type app with React and then deployed it to Heroku. App contains input field and it returns results after pressing Enter, and this works just fine locally. My problem is when I deployed my app to Heroku nothing happens anymore when I hit Enter and trying to search something. I belive app works correctly but for some reason it doest't get data from API when app is deployed to Heroku. Any ideas what causing this problem and how to fix this?
Source code
Live demo
Mixed Content: The page at 'https://reactmoviedb.herokuapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.omdbapi.com/?apikey=bf410ecf&s=dfvdf'. This request has been blocked; the content must be served over HTTPS.
The error your are getting
ReactJS API Data Fetching CORS error
my react app is working locally but after the deploy, I faced the problem when I press any button there is no problem but if I want to refresh I see that problem "404 - File or directory not found."
I found this solution:
https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory
Configure Your Server
"Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response."
But I don't know how can I do this
I try something but it doesn't work
TRY
npm run build, this will create build folder inside your project root folder
if you want to deploy to remote server just transfer that build
folder.
npx serve -s build on windows, if you are using mac kindly see if it is still npx.
then try to refresh every path of it
hope this works, happy coding.
Since the server cannot find the static content in the directory (i.e. not found the file /tomcat/accounts/23), it will give you 404 unless you have additional route handling.
In React routing I think you can try with HashRouter
See more details here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md
HashRouter vs BrowserRouter
I developed an application using nodes and angularjs.
I have an html file that I should display an image.
when running the application on localhost, everything work perfectly and the application displays the image.
I used this code for displaying image:
<img ng-src="./app/images/{{idimage}}.jpeg" ></img>
when I do a push for this application to ibmbluemix, the console told me that there are a 404 not found error.
Any idea please for how displaying image using angulars in ibm bluemix.
Thanks for helps
A possible reason for this issue is if you are pushing the app from outside of the app folder by using the manifest path parameter, and when you run your app locally, you also run it from outside the app folder.
After pushing your app, use cf ssh (docs) to get inside your deployed app. You can then take a look around using linux tools like ls to see what folders have been deployed.