Problem with using .jpg file in custom visual

[BramSchreuder]

Hi Guys,

In my visual.ts im trying to import a texture file (.jpg) for further use. See below:

const loader = new THREE.TextureLoader();

const diffuseTexture = loader.load('./texture.png');
diffuseTexture.wrapS = diffuseTexture.wrapT = THREE.RepeatWrapping;

However this will give me the following error:

Access to image at 'https://app.powerbi.com/13.01.xxxxxx.59/texture.png' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Does it make sense CORS policy gets triggered even when the .jpg file is part of the custom visual repository?

Thanks in advance!

[dm-p]

Hi @BramSchreuder ,

Unfortunately, the webpack configuration bundled with the core powerbi-visuals-tools package does not allow images to be loaded into JS/TS as assets at compile time.

If using the powerbi-visuals-tools to manage your visual packaging, you can embed a local file as a class in the visual's CSS (visual.less file) using the following syntax (using a URL relative to the visual.less file):

.background {
    background-image: url('../assets/texture.jpg)
}

If you can re-use this asset in a DOM element, then this can be a valid workaround. Otherwise, as @Paulhaha has suggested, you'll need to use the JS file API to manually load it into the visual.

If this does not work for you, you might need to look at building a custom webpack configuration with powerbi-visuals-webpack-plugin to configure your own loaders. Note that this moves the management of the packaging to you rather than MS.

One other possibility is requesting MS adds the ability to include local assets vis JS in their configuration for powerbi-visuals-tools, and the best way to start this off would be creating an issue in their repo for it.

Hopefully, this will give you some ideas on how to proceed. Good luck!

Daniel

[Paulhaha]

Hello

Based on my knowledges (I hope I'm wrong), expect the icon, you can't load or deal with local images since they are not packaged in the visual.

Otherwise, you can try to upload your image online, fetch it with JS and then work with it

javascript - Fetch image from API - Stack Overflow

Fetching and Displaying Images with the Fetch API (rapidapi.com)