Отображение пользовательского локального маркера изображения в OSM с использованием OpenLayers

Я следовал руководству по отображению пользовательского изображения в качестве маркера из этой статьи: https://medium.com/attentive-ai/working-with-openlayers-4-part-3-setting-customized-markers-and-images-on-map-da3369a81941

Однако при использовании моей собственной локальной структуры проекта для ссылки на мое изображение png оно не отображается на карте.

Вот мой текущий код:

var aPoint = new ol.geom.Point(ol.proj.fromLonLat([0, 0]))
var aFeature = new ol.Feature({
  geometry: aPoint
})
var aFeatureStyle = new ol.style.Style({
  image: new ol.style.Icon({
    //src: 'https://upload.wikimedia.org/wikipedia/commons/2/2a/Dot.png'
    src: '../../../dott.png'
  })
})
aFeature.setStyle(aFeatureStyle)
var aSource = new ol.source.Vector({
  features: [aFeature]
})
var aLayer = new ol.layer.Vector({
  source: aSource
})



var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
        aLayer
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 14
    })
})

При использовании варианта src:'https://upload.wikimedia.org/wikipedia/commons/2/2a/Dot.png' отображается нужная точка, но при использовании источник: '../../../dott.png' маркеры не отображаются.

Я определенно указал правильный путь к моему локальному файлу png, поэтому у меня нет идей, почему этот код не работает.

Я использую фреймворк Angular и запускаю его на локальном сервере разработки, используя Node.