HTML <img> src path not found

Hi JSJB,

If you're trying to lazy-load assets after the visual is initialised, this will not work, as custom visuals have a null domain and therefore have no relative paths to reference if you attempt to load them from a local address.

I've personally solved this in a similar way in which you've observed: bundling into the .less file and using the background-image attribute on a div, or similar.

However, as powerbi-visuals-tools includes base64-inline-loader, you could declare your images as variables in your code and use this to get a valid data URL for each one, which can be set to the src attribute on an image element.

For example, if I just use the visual icon file in the assets folder, I can do something like this:

const img = require("!!base64-inline-loader!./../assets/icon.png");

...

export class Visual implements IVisual {
  private target: HTMLElement;
  ...
  constructor(options: VisualConstructorOptions) {
    this.target = options.element;
    const new_img = document.createElement("img");
    new_img.src=img;
    this.target.appendChild(new_img); 
    ...
  }
  ...
}

And if I load my visual, this seems to work, e.g.:

If you're expecting your  images to be bundled into the visual package, they're going to be base64 encoded anyway, so this approach may be an option for you?

Regards,

Daniel