使用 new Image() 预加载图片 url

Question

我正在尝试在我的照片库中预加载或预取远程图像，但 new Image() 似乎与 nextjs 的 next/image 冲突。

这段代码在我迁移到 nextjs 之前（使用 CRA）工作正常。

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

非常感谢任何建议。

Answer 1

您可以尝试为 Next.js 的 Image 版本提供一个不冲突的别名（或者使用自定义 Image 导入的其他方式）：

// 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

您可以将 next/image 的导入名称更改为另一个名称，例如

import NextImage from 'next/image'

这将帮助您为您的原创内容保留名称Image

但我认为您可以用 next/image 以更好的方式实现相同的目的

您只需将 priority 道具添加到您的 NextImage

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

它将生成 preload link 以将您的图片作为重要资源预加载。此外，您可以利用 next/image 包中的其他优化内容。

Preload image urls using new Image()