Preload image urls using new Image()

Question

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.

Answer 1

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";

Answer 2

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.