Vue项目中OpenLayers中Style-Icon的图片路径写法

Vue项目中OpenLayers中Style-Icon的图片路径写法

最近在开发中遇到了用openalyers在地图中上加载图片的需求，代码写好后图片一直没加载出来，控制台也不报错，一直找不到问题，后面将图片的地址变成网络图片就加载成功了，所以上网查了一下，opelayers中style-icon的图片路径写法，做一个笔记。

1.使用 require 方式加载图片

此时图片的路径为：“根目录 - src - assets”

let styles = {
  icon: new Style({
    image: new Icon({
      anchor: [0.5, 1],
      src: "require('../assets/icon.png')",
    }),
  }),
};

2.不使用 require 时，图片只能访问public目录下的

此时图片的路径为：“根目录 - public”

let styles = {
  icon: new Style({
    image: new Icon({
      anchor: [0.5, 1],
      src: "./icon.png",
    }),
  }),
};

2.不使用 require 时，图片只能访问public目录下的

此时图片的路径为：“根目录 - public”

let styles = {
  icon: new Style({
    image: new Icon({
      anchor: [0.5, 1],
      src: "./icon.png",
    }),
  }),
};

3.使用在线的图片地址

此时图片的路径为：“根目录 - public”

let styles = {
  icon: new Style({
    image: new Icon({
      anchor: [0.5, 1],
      src: "http:xxxx.com/xxx/icon.png,
    }),
  }),
};