Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
timseltman
Frequent Visitor

Importing user images into a custom visual

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.


Screenshot 2023-08-31 170834.jpg
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).

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

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





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

2 REPLIES 2
dm-p
Super User
Super User

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





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




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

Helpful resources

Announcements
Europe Fabric Conference

Europe’s largest Microsoft Fabric Community Conference

Join the community in Stockholm for expert Microsoft Fabric learning including a very exciting keynote from Arun Ulag, Corporate Vice President, Azure Data.

Power BI Carousel June 2024

Power BI Monthly Update - June 2024

Check out the June 2024 Power BI update to learn about new features.

PBI_Carousel_NL_June

Fabric Community Update - June 2024

Get the latest Fabric updates from Build 2024, key Skills Challenge voucher deadlines, top blogs, forum posts, and product ideas.