Image doesn`t shows after reload the page in browser
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
my project has many images and for display it I use next/image.
After I reload page in browser many of them does not display.
They shows for a second and then browser display empty parent element.
In dev tools source I see the correct ways for image. But if use application navigation on site its work correctly. Only if I reload the page using browser reload.
my component:
After I reload page in browser many of them does not display.
They shows for a second and then browser display empty parent element.
In dev tools source I see the correct ways for image. But if use application navigation on site its work correctly. Only if I reload the page using browser reload.
my component:
import { FC } from 'react';
import Image, { StaticImageData } from 'next/image';
export interface IStudioImg {
id: number;
src: StaticImageData ;
alt: string;
backgroundColor: string;
backgroundImage?: StaticImageData;
modifier?: string;
}
interface Props {
image: IStudioImg;
}
const Item: FC<Props> = ({ image }) => (
<div
style={ image.backgroundImage ? { backgroundImage:url(${ image.backgroundImage.src })} : { backgroundColor: image.backgroundColor } }
className="image__container"
>
<Image
src={ image.src }
alt="alt text"
priority
quality={ 70 }
width="987"
height="555"
className="image__item"
/>
</div>
);
export default Item;65 Replies
not sure why netlify return 404 for the image. is it new image or old?
Asiatic LionOP
it is firs deploy to netlify^ but yes in project I substitude some images and they doesn`t load corretly
Asiatic LionOP
locally it is load with 200 status but they does not show
Asiatic LionOP
receive this absence of image url on reload
I use "next": "^13.4.12",
maybe need to update ?
maybe need to update ?
@Asiatic Lion locally it is load with 200 status but they does not show
how do you import the image?
Asiatic LionOP
also tried like this
@Asiatic Lion locally it is load with 200 status but they does not show
from the log here, look like the image load correctly
Asiatic LionOP
all of my images was imported in this way but only new doesn`t shows on netlify and only new on /studio page does not shows after reload
Asiatic LionOP
yes
@Asiatic Lion yes
could you share the repo?
Asiatic LionOP
sure
ok let me try
images load fine on local
trying to deploy to netlify
Asiatic LionOP
try pls on local reload on browser page /studio
Asiatic LionOP
OMG how did you found it? 
@Asiatic Lion OMG how did you found it? <:aww:767747875974676520>
I edit the element on the dev console
Asiatic LionOP
but on netlify some images still doesn`t load, maybe you know what about properties she add ?https://answers.netlify.com/t/nextjs-build-rendering-404-images/50482/11
I got 502 response
Asiatic LionOP
some of them return 502 some 404
maybe do some redirects?
just installed this and deploying again
it works now
npm install @netlify/ipxsome image 404 now
remove the space
Answer
Asiatic LionOP
sure
that was test import
@Asiatic Lion that was test import
https://gleaming-entremet-0bfb3a.netlify.app/production
removed the space and all images load successfully
removed the space and all images load successfully
Asiatic LionOP
do you mean spaces in name ?
Screen Shot 2023-06-01 at 1.15.01 AM.jpg ==>> Screen-Shot-2023-06-01-at-1.15.01 AM.jpg
Screen Shot 2023-06-01 at 1.15.01 AM.jpg ==>> Screen-Shot-2023-06-01-at-1.15.01 AM.jpg
Asiatic LionOP
ok
@Asiatic Lion ok
also, one of the image is over 50mb, could you reduce the size?
the function got timeout for loading that image
Asiatic LionOP
yep that is our bottle neck
@Asiatic Lion yep that is our bottle neck
just one image I forgot which one
Asiatic LionOP
I`ll check
@Asiatic Lion I`ll check
production/1/3gif.gif
68mb
Asiatic LionOP
yes it`s need to be removed
Asiatic LionOP
there are 4 more large files that back 502
I guess it also need to be removed or optimize before load to project
I guess it also need to be removed or optimize before load to project
Asiatic LionOP
for mobile version looks weird
OMG what is going on with this netlify ðŸ˜
Asiatic LionOP
it`s alredy filled
whose error was returned while cache disabled
@Asiatic Lion whose error was returned while cache disabled
or delete the project and redeploy again
Asiatic LionOP
guess the problem because of huge files
Asiatic LionOP
just for info
Netlify's Lambda functions have a default timeout of 10 seconds. This means that if your function takes longer than 10 seconds to execute, it will be terminated and a timeout error will be returned. This limit is in place to ensure efficient use of resources and to prevent long-running functions from blocking other operations.
However, if your function needs more time to execute, you can request an increase in the timeout limit. The maximum execution limit for synchronous functions can be increased up to 26 seconds by contacting Netlify's support team. You can do this by posting in the Admin area of the Netlify forum or directly contacting them through their support page.
For functions that require more in-depth work or to talk to potentially very slow APIs, Netlify also offers background functions which are designed to run asynchronously for up to 15 minutes.
Please note that these limits are in place because Netlify Functions use AWS Lambda, and the same limits apply here.
For more information, you can refer to the following sources:
Netlify Lambda Functions 101 & Debugging
502 error SSE Open AI Application
What is the maximum File size Upload limit in a Netlify Form submission?
How to overcome 10 second limit for Lambda
Is it possible to increase my lambda function time out from 10s to +- 30s?
Functions overview > Custom deployment options
Netlify's Lambda functions have a default timeout of 10 seconds. This means that if your function takes longer than 10 seconds to execute, it will be terminated and a timeout error will be returned. This limit is in place to ensure efficient use of resources and to prevent long-running functions from blocking other operations.
However, if your function needs more time to execute, you can request an increase in the timeout limit. The maximum execution limit for synchronous functions can be increased up to 26 seconds by contacting Netlify's support team. You can do this by posting in the Admin area of the Netlify forum or directly contacting them through their support page.
For functions that require more in-depth work or to talk to potentially very slow APIs, Netlify also offers background functions which are designed to run asynchronously for up to 15 minutes.
Please note that these limits are in place because Netlify Functions use AWS Lambda, and the same limits apply here.
For more information, you can refer to the following sources:
Netlify Lambda Functions 101 & Debugging
502 error SSE Open AI Application
What is the maximum File size Upload limit in a Netlify Form submission?
How to overcome 10 second limit for Lambda
Is it possible to increase my lambda function time out from 10s to +- 30s?
Functions overview > Custom deployment options
Asiatic LionOP
already ask
and also deployed to vercel and it works much better
and also deployed to vercel and it works much better
Thanks a lot for your help, so kind from your side
You are y hero
You are y hero