为什么Leaflet JS中自定义点标记图标显示为空白方块？

Leaflet自定义标记图标显示异常问题 #

我尝试给点标记设置自定义图片图标，但地图上的图标显示异常，样式如下：

我查阅了Leaflet官方文档等相关资料，没有找到对应的解决方案，推测是忽略了某个简单细节。如果需要补充其他代码来定位问题可以告知，提前致谢。

以下是我的初始脚本代码：

// 定义地图容器变量并设置初始参数
var map = L.map("map", {
  center: [38.1, -98.583333],
  zoom: 4,
});
// 向地图添加OSM瓦片图层
L.tileLayer(
  "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
, {
    attribution:
      '© OpenStreetMap contributors © CARTO',
    subdomains: "abcd",
    maxZoom: 19,
  }
).addTo(map);

var logo = L.icon({
  iconUrl: "imgs/patrickLogo.png",
  iconSize: [20, 20],
});

L.marker([40.308746567390294, -105.08229135535235], { icon: logo })
  .addTo(map)
  .bindPopup("Berthoud, CO");

问题更新 #

后续排查发现报错为404，不清楚该错误的含义以及修复方法。

最终解决方案 #

将图标配置中的相对路径替换为绝对路径后问题解决，修复后的代码如下：

var logo = L.icon({
    iconUrl:
      "https://d2q79iu7y748jz.cloudfront.net/s/_squarelogo/8ec294c2f144d43bf5d7ec5f4f96d0c9",
    iconSize: [20, 20],
  });

内容的提问来源于stack exchange，提问作者liso_maps