Image component loads slow despite having a URL
Unanswered
Cape lion posted this in #help-forum
Cape lionOP
Hey guys, I'm trying to load a recently uploaded image to our site, but it takes time for the Image to load even though we already have the generated URL from it, see video for reference:
Is it possible for us to show the Image right away instead of having to wait 2-3 seconds for the preview to load?
These are the following that I've tried so far:
- priority
- loading="eager"
Is it possible for us to show the Image right away instead of having to wait 2-3 seconds for the preview to load?
These are the following that I've tried so far:
- priority
- loading="eager"
4 Replies
@Cape lion Hey guys, I'm trying to load a recently uploaded image to our site, but it takes time for the Image to load even though we already have the generated URL from it, see video for reference:
Is it possible for us to show the Image right away instead of having to wait 2-3 seconds for the preview to load?
These are the following that I've tried so far:
- priority
- loading="eager"
well it takes time for the image to load and you cannot get rid of this time. depending on internet speed it could be 2-3s it could be less but could also be much more
if you already have the image in advance (whether by having the URL in advance during the "processing image to text" part, or by having the user upload the image), you can simply render that existing image instead of render the image from the generated URL
if you already have the image in advance (whether by having the URL in advance during the "processing image to text" part, or by having the user upload the image), you can simply render that existing image instead of render the image from the generated URL
@Cape lion Hey guys, I'm trying to load a recently uploaded image to our site, but it takes time for the Image to load even though we already have the generated URL from it, see video for reference:
Is it possible for us to show the Image right away instead of having to wait 2-3 seconds for the preview to load?
These are the following that I've tried so far:
- priority
- loading="eager"
well since the user is uploading the image and you're showing a preview, you can use [
createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static) to show a preview const previews = files.map((file, index) => {
const imageUrl = URL.createObjectURL(file);
return <img key={index} src={imageUrl} onLoad={() => URL.revokeObjectURL(imageUrl)} />;
});(this is a pseudo code, update accordingly)