Importing user images into a custom visual

[timseltman]

I am starting a Power BI custom visual project where I am trying to have the user assign an image to a data record; using the imageURL or webURL data role; and to be able to pull said image into the custom visual. The visual will allow for customization that the baseline image importer or imageURL lists are not able to perform. The issue is that it appears that images pulled using a url are not getting pulled into Power BI custom visuals. Images that are already in base64 are able to be pulled just fine. In the example below, you can see on the left a list of imageURL while on the right is a custom visual that is showing a list of “img” tags of the same column. As you can see, the images of the bass and the bird which are in jpeg formats are not showing, while the image of the wolf; which is in base64; is showing correctly.

I have also tried to use several image-to-base64 coding techniques to convert the images to base64 within the application, but it appears that the images are not getting downloaded in the first place. I am also aware of the fact that powerbi-visual-tools packaging converts any in-visual image assets into base64. But overall, I am just trying to figure out if Power BI is blocking any images from being pulled into a custom visual; even when it is user supplied or if there is a way for me to allow images through. I understand this could be a security issue since images can be injected and Microsoft may not want images it has not vetted going through their system. I am willing to force the user to only provide base64 strings but even then, I am aware of the limitations of the character count a column can have (around 32,000 characters).

[dm-p · Accepted solution]

Hi @timseltman,

You can check for errors in your browser console using the developer tools regarding web access. For versions of powerbi-visuals-api < 4.6.0, this will likely be a cross-origin error (where the remote endpoint does not allow requests from a sandboxed iframe, which is how a custom visual is hosted by Power BI).

Assuming that you are using >= 4.6.0 of the powerbi-visuals-api, this introduces privileges. For your visual to attempt web access, you will need to configure the WebAccess privilege accordingly. You can also check your console for errors to determine if the visual host has blocked the remote request, or if the remote host has.

For generic web access using privileges, the following configuration should be sufficient, provided that a remote endpoint permits anonymous access also:

{
    "privileges": [
        {
            "name": "WebAccess",
            "essential": true,
            "parameters": [
                "https://*",
                "http://*"
            ]
        }
    ],
    ...
}

I'm not aware of how to manage access to sites that require scenarios like OAuth authentication, but this may work for sites that accept basic HTTP auth (although you will need to provide your user the means to enter these credentials if you need something generic).

Regards,

Daniel

[timseltman]

This worked perfectly. Thank you. I have marked that this is the solution I required.