I'm new in next js. i recently deployed my project to vercel. everything is working fine. but images are making errors as shown below
Failed to load resource: the server responded with a status of 502 ()
image URL: https://portfolio-l2jkasia3-shafeequeot.vercel.app/_next/image?url=%2F..%2Fpublic%2Fimages%2Fnetflix.jpg&w=384&q=75
at the same time I have used import images. it is working fine after deploy
On localhost everything is working fine, but when I deploy my website to Vercel the images do not load properly.
images given as below
<Image width={330} height={220} className='object-fill w-44' src={key.image} alt={key.name}></Image>
import images as below (it is working after deploy)
import Cover from '../public/cover.jpg'
<Image className='object-fill w-44' src={Image} alt={key.name}></Image>
Can somebody help me?
i have referred this Images not loading in Next.js application after deploy on Vercel
but no luck
I also had this issue and fixed it by dropping the ../public and just using the path to the image as if I was already operating inside the public folder.
Change the value of key.image to "/cover.jpg"
<Image className='object-fill w-44' src={key.image} alt={key.name}></Image>
You can also try using the img tag instead. This worked with my deployed(to Vercel) nextjs app.
Related
I'm using amazon s3 as CDN, everything is working fine when I run the application using 'yarn dev'(domain added to next config). If I check inspect I can see the following value in the src attribute of the img element:
src="/_next/image?url=https%3A%2F%2Fcf-simple-s3-origin-gallery-hior-021672050205.s3.us-east-2.amazonaws.com%2FslidesImages%2Flogo.png&w=640&q=75"
When I'm running 'yarn build & yarn start' the src attribute set as the following:
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
which causing the issue loading the images, what am I missing here?
I was able to find the root cause for that issue(also reproduced with static images).
I added an unnecessary config variable inside the component which disabled the React client-side and causing the loading issue.
export const config = {
unstable_runtimeJS: false,
};
though this is probably not the issue, I had a similar problem, just make sure that if you are using ReactJS to have className instead of class
I am working on an application with React on monorepos, using nx.dev, service workers and configured with craco (came by default when using cra-to-nx). In addition, I'm deploying my application in vercel.
The problem comes in that when entering my application, always appears a blank screen, and by console appears the following error:
Error by console 404 static
If I enter in that file main.XXX.js, I see the following:
Error by console 2
I have tried several of the solutions I have found on the internet, but nothing has worked.
I have written
I have tried with homepage=".", homepage="/" and homepage="mydomain.com" in the package.json.
Thank you very much in advance
I'm using service worker and caching with workbox using webpack for a vuejs app. While it worked fine until now, when I pushed new changes to our app, the app breaks after reloading the page and gives this error. Also, in the network tab, I see that it is requesting a non-existing app.js build file which was a previous deploy file. How do I solve this?
If you observe the image, you can see that the request is going to older app.js file while in the dist folder to the left, the hash of app.js bundled is different.
error image
I'm working on my first Vue app, which uses the Moment library and Firebase (if that matters). I use default Webpack simple. To deploy the app I did npm run build.
But when opening directly index.html (the app is deployed here) I get "Failed to load resource: the server responded with a status of 404 (Not Found)" error message and the app doesn't work at all as a result.
I have no idea how to troubleshoot this issue since there's no more information that this in DevTools...
Any idea about what I can do next?
App source code
Remove the first forward slashes of all your assets path.
It should fix your problem.
<script src="/dist/build.js"></script> // No!
<script src="dist/build.js"></script> // Yes!
Vue adds it by default during the build process, in order to make your assets relative to the root folder.
I am using this module react-native-webp to load webp images on ios. However, I am not seeing the images from s3 load. Using an image found from google search, works fine. There are absolutely no logs whatsoever to help debug the issue!
This is an example url that doesn't load: http://s3-ap-south-1.amazonaws.com/rupyacard/offers/pictures/000/000/007/1280/dinner.webp
And this here is one that's loading just fine! https://www.gstatic.com/webp/gallery/1.sm.webp
Can't find a reason for either to not work. I thought it might have to do with the image size but a smaller version doesn't help either. Here's a smaller variant: http://s3-ap-south-1.amazonaws.com/rupyacard/offers/pictures/000/000/007/320/dinner.webp
Please give path images to HTTPS or just do following settings in xcode and clean rebuild app
The main problem is Apple can't load HTTP images without settings.