I am using next.js 11.1.0 , my images are not showing saying (image below). I tried upgrading to next.js 12 but the problem still persist. I also tried using img tag and it works fine, just next/image not working. It seems not to work on live site production. My images are stored locally. Anyone encountered this?
<Image
src="images/Uploads/Activities/StoryTelling/3_2022-05-07203A383A38.jpeg"
width={500}
height={500}
/>
If everything works fine on local but not in production it might be an image loader issue. I invite you to take a look at the documentation as you may need a custom function to resolve URLs.
Image loader
Built-in loader
I had the same issue when deploying on GCP but everything worked on Vercel.
You have to write src={/photoname.format} when it's Next Image, instead of the whole path.
Related
I am experiencing something in production which isn't reproducible locally.
The Link from nextjs (version 12.3.x) works well in development and when running the build in production mode locally, meaning that the navigation happens without a full page reload. But when deployed with terraform, all Link components are causing a full page reload. Everything else works as expected.
I have a mixture of Link children across the application, sometime it's a, but other times it's a button or simply a div or span. In every case, the full page refresh happens. That's why I suspect it must be something related with the configuration rather than the Link usage, however I am not sure where to start debugging and I am looking for a hint in the right direction.
Back with an answer to this. In my case, nothing was wrong with the Link components itself, nor with the build. The problem was with a path rewrite in our terraform configuration (it was rewriting everything in /_next/*).
It appears that getServerSideProps fetches JSON files which will be used to render the page Their paths were being re-written and causing a 403 error, which made the page reload instead of allowing me to navigate seamlessly as I am used to with next.
This problem was very specific to my configuration, but my general recommendation is to check whether you are rewriting any path of the json files created by next at navigation, in case you are experiencing the same problem only on staging/production.
So my problem is the following: my website doesn't look the same local and online. It is linked to the same git repository and same css file, however. I can open the page in local and online on same browser and same screen.
Everything seems linked correctly, since when I update the git repo from my local project, I see the changes on the online project. Except for some css property.
On local: the font-size is much bigger and more appropriate, and the flex/height of the container div are all Ok.
Online: font-size is way too small; div doesn't have proper height, and flex aren't respected.
Any idea what the problem is?
I'm using Digital Ocean for hosting the website and Buddyworks for linking my github to Digital Ocean. I'm sure auto upgrade is enabled because when I add content, it is showed on the online version.
The project itself is in NextJs and CSS.
Any help is welcome. I'm using Chrome but tried also Firefox as well and the same issues are happening.
Screen of local rendering:
https://ibb.co/rGL7Y7j
Screen of online rendering:
https://ibb.co/8sPkjJS
PS : Sorry for my English, I'm not an English native speaker :)
Ok it's my bad, for some reason the second broswer window didn't open in same zoom level than first one ...
If it happens to anyone again, I just had the same issue today except that the fonts were way bigger online and it was not a zoom issue.
I made my web app with ReactJs and I simply forgot to build it before deploy it (on Netlify).
While using FlowRouter if I load my page any locally served images (images/myImage.png) works fine. But if I navigate to a page and then navigate back (home page -> about page -> home page) the image is broken. However in the developer console, if I hover over the image source, the image appears fine.
This is not an issue with images served from another server.
Update
I never solved this issue, but because this still seems to be an issue with many people. I'm posting my work around. Based on the Meteor communities advice, I switched to cloud based image hosting like Cloudinary or AWS
It sounds like you are sometimes accessing images using their file paths. With Meteor, to serve static files properly, they need to be in the /public folder of your project. So you should put them in /public/images, and then reference them according to the following example:
The file
/public/images/foo.png
is displayed by
<img src="/images/foo.png>
See here: https://guide.meteor.com/structure.html#special-directories
I realized that although my images worked with the following:
Image is in /public/images/name.png
<img src="images/name.png">
But then I changed the url to:
<img src="/images/name.png">
Now it works and doesn't break.
I made a chatroom with Node.JS and Socket.io. I'm using bootstrap CSS and JS in my project for things like tabs and carouser. The website looks and works perfect on my local server, here aresome screenshots:
but when I pushed the same code on my github and deployed it on heroku, every thing is just cluttered: https://doclerchat.herokuapp.com/
Here is the source code on GitHub: https://github.com/anshul119/chatapp/
Seems like Bootstrap CSS and JS aren't loading thats why only those specific things are creating problems. How can I resolve this issue?
Any help is appreciated.
So, as #vanburen commented, this solved the problem:
Change your requests to the CDN from http to https:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css and https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
I think I have installed everything needed and installed it correctly, but I am obviously missing something; or had a misstep somwhere along the line. I am on a Linux and I know for a fact the site works when viewed elsewhere. Here is a screenshot of what I see when I view the site locally: http://imgur.com/yPWcanu What are the common causes for this?
There might be some problems with paths. Open the Chrome development toolbar and check if there's a problem with loading the css files.
You should see them under the "Network" tab after reloading the page.