NextJS 图片 - 重新加载 gif onClick答案

【问题标题】：NextJS images - reload gif onClickNextJS 图片 - 重新加载 gif onClick
【发布时间】：2021-08-21 23:46:16
【问题描述】：

所以基本上我在我的网站上使用 NextJS，但我遇到了问题。我有一个按钮，onClick 显示永远循环的 gif。无论我使用 Next/Image 还是简单地使用带有公共文件夹源的 img src 我都无法强制挂载 gif，因此如果用户单击动画然后关闭它，动画将不会从头开始，而是从最后一刻开始已关闭。

我尝试在onClick 上使用此功能，但我认为NextJS 仍在提供来自公共文件夹的预加载文件。如何解决？每次用户点击显示按钮时，我都希望 gif 从头开始。

const reloadGif = () => {
        setReload('/')
        setTimeout(() => {
            setReload('/InjectionGIF.gif')
        }, 5)
    }

【问题讨论】：

PS 我也尝试了关键道具的技巧 - 仍然无法正常工作，并且在网络选项卡中 NEXT 仍然在提供相同的文件而无需重新加载

标签： reactjs next.js

【解决方案1】：

您可以尝试更改源本身。像这样的东西应该可以工作：

import { useState } from 'react';

const IndexPage = () => {
  const [hidden, setHidden] = useState(true);

  const toggleReveal = () => {
    setHidden(!hidden);
  };

  return (
    <>
      <div className="wrapper" onClick={toggleReveal}>
        <img
          src={
            hidden
              ? ''
              : 'https://media0.giphy.com/media/YTETMtpsueseikztWR/giphy.gif'
          }
          alt=""
          height="300"
          width="240"
        />
      </div>
      <style jsx>{`
        .wrapper {
          background: #000;
          height: 300px;
          width: 240px;
        }
        img[src=''] {
          display: none;
        }
      `}</style>
    </>
  );
};

export default IndexPage;

您可以使用next/image 代替img。此外，隐藏图像的方法可能有很多，例如有条件地渲染元素，或者将源替换为 1x1 透明图像。

这是一个完整的例子：https://codesandbox.io/s/twilight-fire-g36n1

【讨论】：