这是一个棘手的问题，可能不容易解决。
问题是，以我们现时的系统来说，这些图片/照片是非常大的，例如每张5 MB或6 MB，而且每隔数天便会由不同的小组上载。即使我们可以要求后端小组有一个系统，稍后将它们转换成缩略图及较小的图片，例如50 KB或150 KB，但这可能仍需数月时间，而且并非我们所能控制。（另一点是，当我们让用户在模态中预览这些照片时，我们可能希望给予他们全尺寸的图像，而不是压缩的图像）。
如果我们使用vanilla JavaScript加载第二张图像，例如在网页上的图像预览模式中，当用户点击“切换”以查看下一张图像（再次切换以查看下一张图像）时，会出现两个问题：
1.标题和图像彼此不匹配
1.用户无法知道图像正在加载，就好像点击后没有React一样
代码为：

document
          .querySelector("#toggle-button")
          .addEventListener("click", () => {
            toggle = !toggle;
            filename = `${toggle ? "beach.jpg" : "mountain.jpg"}?${Date.now()}`;
            elMsg.innerHTML = `<span>Title is ${
              toggle ? "Beach" : "Mountain and Lake"
            }</span>`;
            elImage.src = filename;
          });

你可以试试这里的代码：
https://codesandbox.io/s/silly-haze-4uonqv?file=/index.html

为了使效果更明显，请转到Google Chrome上的DevTool，然后转到网络选项卡，并将“无节流”更改为“慢速3G”速度。

然后您将看到上面提到的问题#1和问题#2。
注意，这里我使用了Date.now()附加到文件名，因此图像URL为：
https://4uonqv.csb.app/beach.jpg?1678392429912
以便使该高速缓存崩溃，这是为了演示的目的以显示这两个问题。
如果我使用React也是一样的，代码如下：

function App() {
  const [toggle, setToggle] = useState(true);

  const imageFilename = `${
    toggle ? "beach.jpg" : "mountain.jpg"
  }?${Date.now()}`;

  return (
    <div className="App">
      <div id="msg">
        <span>toggle is {JSON.stringify(toggle)}</span>
        <span>imageFilename is {imageFilename}</span>
        <span>Title is {toggle ? "Beach" : "Mountain and Lake"}</span>
        <button onClick={() => setToggle((f) => !f)}>Toggle</button>
      </div>
      <img src={imageFilename} alt="a big file" />
    </div>
  );
}

您可以在这里尝试：
https://codesandbox.io/s/floral-resonance-elouv7
图片2（mountain.jpg）大约为1.5MB，如果文件大小为5 MB或6 MB，问题就更严重了。
那么什么是处理这个问题的好方法呢？如果可能的话，我希望不要使用复杂的方法，比如使用微调器，而是使用两步方法，也许首先显示一个空白的图像占位符，然后将src设置为新的占位符...因为对于只显示图像的目的来说，这是一种过度的做法。
如果是Vanilla JavaScript，我想到了一个快速的方法，那就是每次替换整个<img />：

elImageContainer.innerHTML = `<img src="${filename}" />`;

你可以试试
https://codesandbox.io/s/objective-bhabha-imdipn
但是我不认为这可以在React中完成，这是项目正在使用的，因为我认为新的虚拟DOM已经创建，并且与以前的虚拟DOM不同，没有办法判断它是否是一个新的<img />元素，就像Vanilla JavaScript的情况一样。
有什么好的解决办法吗？