Angular 无法在ngx映射框中显示自定义标记图标

我正在尝试在我的angular应用程序中的mapboxgl地图中显示自定义标记图标。我已经完成了示例中显示的几乎所有内容，但无法显示自定义图标。如果我只是创建一个法线标记，它会显示在地图上。但当我尝试指定自定义图标时，什么也不显示。我知道它会拾取我的css，因为如果我将路径名更改为不存在的文件，它会抛出一个错误。当我将它们记录到控制台时，我会查看创建的标记对象和地图，我会看到标记是地图的一部分。但图标不显示。尝试和调试此功能的最佳方法是什么？自从我复制了已发布的示例后，我看不到任何明显的错误

    var el = document.createElement('div');
    el.className = 'breadcrumb';
    console.log('el=', el);

    var marker = new Marker(el)

      .setLngLat( [this.staticBreadcrumbs.features[0].geometry.coordinates[0],
               this.staticBreadcrumbs.features[0].geometry.coordinates[1]] )
      .setPopup(new Popup({ offset: 25 }) // add popups
      .setHTML('<h3>' + '</h3><p>' + 'hello marker' + '</p>'))
      .addTo(this._mapRef);


    console.log('adding static marker ', marker);
    console.log('map=', this._mapRef);

---

使其工作的关键是从css中删除背景图像并将其添加到代码中

  el.style.backgroundImage = 'url("/assets/breadcrumb-5px.png")';
  el.style.width = '5px';
  el.style.height = '5px';

所有三件事都是必需的——由于url是本地文件，所以路径周围的引号，以及使图标显示所需的高度和宽度

  el.style.backgroundImage = 'url("/assets/breadcrumb-5px.png")';
  el.style.width = '5px';
  el.style.height = '5px';