相关疑难解决方法(0)

出于搜索引擎优化和社交媒体链接的原因，我目前正在将 ReactJS 客户端呈现的应用程序转换为 NextJS 应用程序。

转换的组件之一，基本上是等待加载完成然后淡入的图像，在 NextJS 环境中使用后无法按预期工作。

它的行为方式如下：

缓存已启用：

• 第一次加载图像并触发 onLoad 事件从而显示图像。
• 第二次图像保持隐藏状态，因为从缓存加载图像时不会触发 onLoad 事件。

使用 devtools 禁用缓存：

• onLoad 事件始终有效，因为图像永远不会从缓存中提供。

预期行为和之前仅使用 ReactJS 实现的行为：

• onLoad 事件应该触发图像是否从缓存中加载。

当不使用 React 时，这个问题通常是因为有人src在定义onload函数之前设置了图像：

let img = new Image()
img.src = "img.jpg"
img.onload = () => console.log("Image loaded.")

应该是：

let img = new Image()
img.onload = () => console.log("Image loaded.")
img.src = "img.jpg"

这是在 NextJS 中导致相同问题的简化代码：

import React, { useState } from "react"

const Home = () => {
    const [loaded, …