Невозможно отобразить пользовательский значок маркера в ngx-mapbox-gl angular

Question

Я пытаюсь отобразить пользовательский значок маркера на карте 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:

.breadcrumb {
  background-image: url('breadcrumb-50px.png');
  width: 50px;
  height: 50px;
  z-index:999;
}

Answer 1

Ключом к тому, чтобы заставить его работать, было удаление фонового изображения из CSS и добавление его в код.

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

Требовались все 3 вещи - кавычка вокруг пути, поскольку URL-адрес является локальным файлом, а высота и ширина требовались для отображения значка.