我正在制作一个简单的投资组合网站，该网站在后台循环播放全屏图像。

我已经创建了两组图像，一组用于台式机，另一组用于移动机（这是台式机的裁剪版本）。

对于每个集合，我将它们存储在自己的数组中。像这样：

图像存储在image文件夹中本地。

BackgroundImages.js

import AltairMockup from "../../images/gallery/desktop/altair-mockup.jpg"
import EspertechMobile from "../../images/gallery/desktop/espertech-mobile.jpg"
import EspertechNamecard from "../../images/gallery/desktop/espertech-namecard.jpg"

import MAltairMockup from "../../images/gallery/mobile/m-altair-mockup.jpg"
import MEspertechMobile from "../../images/gallery/mobile/m-espertech-mobile.jpg"
import MEspertechNamecard from "../../images/gallery/mobile/m-espertech-namecard.jpg"

export const DesktopBackgroundImages = [
  { id: 0,url: AltairMockup },{ id: 1,url: EspertechMobile },{ id: 2,url: EspertechNamecard }
  // ... 7 more,10 in total
]

export const MobileBackgroundImages = [
  { id: 10,url: MAltairMockup },{ id: 11,url: MEspertechMobile },{ id: 12,url: MEspertechNamecard }
  // ... 7 more,10 in total
]

我已将图像预加载到父组件中：

Gallery.component.jsx

  // Preload images
  useEffect(() => {
    if (process.env.NODE_ENV === "development")
      console.log("Swapped image arrays")

    if (isDesktop) {
      DesktopBackgroundImages.forEach(({ url }) => {
        const img = new Image()
        img.src = url
      })
    } else {
      MobileBackgroundImages.forEach(({ url }) => {
        const img = new Image()
        img.src = url
      })
    }
  },[isDesktop])

然后，我使用react-spring创建了一个图像轮播/图像库循环程序，一切在本地开发中都可以正常工作。

如您所见，在Chrome检查器的Network标签下，已为桌面获取了正确的图像数组。

但是，一旦我将代码推送到Netlify后，该页面实际上由于某种原因而获取了移动阵列的第一张图像，从而导致它掩盖了桌面阵列的第一张图像。

我不知道是什么导致了仅在生产环境中出现的额外提取错误。

特别是m-altair-mockup...甚至是在桌面映像之前被预加载的，因为initiated似乎(index)是initiated，而Gallery.component.jsx是正确的delegate 1}}。

展示错误的实时网站：https://altair-studio.netlify.com/

请解释，谢谢！