Next JS Image 组件不预先加载 svg /禁用“延迟加载”答案

【问题标题】：Next JS Image component doesn't load svg beforehand / disable "Lazy Loading"Next JS Image 组件不预先加载 svg /禁用“延迟加载”
【发布时间】：2023-02-02 13:53:58
【问题描述】：

问题仅在于 svg 图像。适用于其他格式

你好！我在 nextjs 中使用图像组件。我在尝试将 svg 图像添加到模态窗口时遇到了问题。当我打开模式时，图像丢失了，加载大约需要一秒钟。每次重新打开模态窗口时都会发生这种情况。

我认为这是由于“延迟加载”造成的。这个选项在这种情况下是非常不合适的。我想在用户进入网站时立即加载图像，而不是在模式窗口打开期间加载图像

我尝试了几种方法。

将图像属性分配给组件
```
     ` 

    <Image
     src={Email}
     alt={"Picture"}
     width={20}
     height={20}
     loading={"eager"}
     priority
 />

    `
```
问题依然存在。打开每个模态窗口后加载图像需要一秒钟的时间
1. 在主组件中加载图像，并通过道具将其传递到模态窗口。问题依然存在
我的 svg 图片很小。我也尝试过其他图像

【问题讨论】：

标签： reactjs image svg next.js

【解决方案1】：

next js 中的图像组件将 svg 转换为光栅格式以创建不同大小的多个副本。在 svg 的情况下，这是没有必要的。

在 next.config.js 你需要添加

module.exports = {
  images: {
    dangerouslyAllowSVG: true,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
}

【讨论】：