防止加载默认图片后地图背景图片出现404错误

Question

// 确定地图背景图片路径

let mapName;
      if (serverMap.includes('/')) {
        const pathParts = serverMap.split('/');
        const prefix = pathParts[0];
        const map = pathParts[1];
        mapName = `/maps/${prefix}/${map}.png`;
      } else {
        mapName = `/maps/${serverMap}.png`;
      }

// 检查地图背景图片是否存在，不存在使用默认

const mapBackground = new Image();
mapBackground.onload = function() {
  const backgroundImageUrl = `url(${mapName})`;
  document.getElementById('serverData').style.backgroundImage = `linear-gradient(rgba(34,34,34,0.45), rgba(34,34,34,0.45)), ${backgroundImageUrl}`;
};
mapBackground.onerror = function() {
  const defaultImageUrl = '/maps/default.png';
  const backgroundImageUrl = `url(${defaultImageUrl})`;
  document.getElementById('serverData').style.backgroundImage = `linear-gradient(rgba(34,34,34,0.45), rgba(34,34,34,0.45)), ${backgroundImageUrl}`;
};
mapBackground.src = mapName;

此代码检查地图背景图像是否存在，如果不存在则使用默认图像。它创建一个 Image 对象并设置它的 onload 和 onerror 事件处理程序。

我遇到的问题是加载默认图像后地图背景图像出现 404 错误。