OpenLayers 6-自定义标记未显示

Question

我创建了地图并放置了一个标记。我唯一可以使用的标记是OpenLayers托管的标记。我在“ img / marker.png”中有自己的标记，但是没有显示？有任何想法吗？我尝试将其移至根文件夹，并使用“ ./img/marker”成功。

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorSource from 'ol/source/Vector';
import {Icon, Style} from 'ol/style';
import {Vector as VectorLayer} from 'ol/layer';

const ukCenterLonLat = [-4.5, 55];
const ukCenterWebMercator = fromLonLat(ukCenterLonLat);

const GYLonLat = [1.728, 52.5982];
const GYWebMercator = fromLonLat(GYLonLat);

const iconFeature = new Feature({
  geometry: new Point(GYWebMercator), //This marker will not move.
  name: 'Great Yarmouth',
});

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new VectorLayer({
      source: new VectorSource({
        features: [iconFeature]
      }),
      style: new Style({
        image: new Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          crossOrigin: 'anonymous',
          // src: "marker.png",
          src: 'https://openlayers.org/en/latest/examples/data/icon.png'
        })
      })
    })
  ],
  view: new View({
    center: ukCenterWebMercator,
    zoom: 5
  })
});