relative path of vl-style-icon

[empereira]

Hi @ghettovoice ,

314 start here...

When I use an url, it works, but when I put the relative path of the local icon/image, it does not render.

I using this via json code.

const src = "../assets/weather-station.png";

export default {
   data () {

   layers: [
        {
          id: "circles",
          title: "Estações Meteorológicas",
          cmp: "vl-layer-vector",
          visible: false,
          source: {
            cmp: "vl-source-vector",
            staticFeatures: stations,
          },
          style: [
            {
              cmp: "vl-style-box",
              styles: {
                // "vl-style-func": {
                //   factory: this.styleFeature,
                // },
                "vl-style-icon": {
                  src: src,
                  scale: 1,
                  anchor: [0.5, 1],

veu.config.js

module.exports = {
  transpileDependencies: ["vuetify"],
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap((options) => {
        return {
          transformAssetUrls: {
            video: ["src", "poster"],
            source: "src",
            img: "src",
            image: ["xlink:href", "href"],
            use: ["xlink:href", "href"],
            "vl-style-icon": "src", // this tells vue-loader transform relative/absolute paths to require
          },
        };
      });
  },
};

Do I need other settings?

[empereira]

Needed the "require." Now, works!!

const src = require("../assets/weather-station.png");

[ghettovoice]

Hello @empereira , in your case you are right, you need require or import.

But transformAssetUrls in vue-loader options need to automatically transform from template.

<template>
  ...
  <vl-style-icon src="../imgs/marker.png" />
...
</template>

With transformAssetUrls this will automatically transform to const marker = require('../imgs/marker') and use it as prop.