Preload image urls using new Image()

user_748184 0
Viewed 1099

I'm trying to preload or prefetch remote images in my photo gallery but it seems that new Image() conflicts with the nextjs's next/image.

This code works fine before(using CRA) I migrated to nextjs.

 const img = new Image();
 img.src = photoToPreload.largeUrl;

Any suggestion is very much appreciated.

nextjs-image next.js
3 Answers

You can change imported name of next/image to another name like

import NextImage from 'next/image'

That would help you to reserve the name Image for your original stuff

But I think you can achieve the same thing with next/image in a better way

You just add priority prop to your NextImage

<NextImage {...otherProps} priority={true}/>

It will generate preload link to preload your image as an important resource. Furthermore, you can leverage other optimization stuff in next/image package.

user_92015870

You can try giving Next.js's version of Image a nonconflicting alias (or the other way around with your custom Image import):

// CommonJS style
const { default: NextImage } = require("next/image");

// ES module style
import NextImage from "next/image";

// alternatively
import { default as NextImage } from "next/image";
user_151152990

To prefetch new images of the Carousel, you can render an invisible Image component with the src of the next image and NextJS will preload it to you and will be ready when the user swipe to the next slide. If your carousel is above-the-fold, make sure to add priority to the first slide also.

import NextImage from 'next/image'
() => {
  return (
    <div className="relative w-[300px]">
      <NextImage
        src={Screens[activeScreenIdx]}
        placeholder="blur"
        quality={100}
        layout="fill"
        objectFit="contain"
        sizes="350px"
      />
    {/* prefetch next image */}
      <NextImage
        {/* ..% Screen.length to avoid going out boundary */}
        src={Screens[(activeScreenIdx + 1) % Screens.length]}
        placeholder="blur"
        className="invisible" {/* just for preloading purposes */}
        quality={100}
        layout="fill"
        objectFit="contain"
        sizes="350px"
      />
    </div>
 )
}
user_58650990
Related