dmc.Image no longer supports base64 encoded images

[subsurfaceiodev]

As per title, using latest version of dash-mantine-components == 0.14.3, see following mre:

import dash
import dash_mantine_components as dmc
from dash import Dash, html

dash._dash_renderer._set_react_version('18.2.0')

app = Dash(__name__)

img_src = (
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAEFklEQVR4nO3dsW7bQBRFwSjw//'
    '8yU6UJYDgil9xdnZnalp6LewhBhV/HcRy/gKTfsw8A5hEACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACB'
    'MACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBM'
    'ACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMA'
    'CBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACPuafUDd6/X68WeO43jgEooE4GH/M/iffkcQGEUAHnJm+D+9lhBwl'
    'QDcbOTwv3ttIeAsAbjJncP/7r2EgHf5FuAGT45/hfdlXwIw2OwRzn5/9iIAA60yvlXuYH0CMMhqo1vtHtYkAAOsOrZV72IdAn'
    'DR6iNb/T7mEoALdhnXLnfyPAGAMAE4aben6m738gwBgDABOGHXp+mud3MfAYAwAXjT7k/R3e9nLAGAMAGAMAGAMAF4w6d8fv'
    '6Uv4PrBADCBADCBADCBADCBADCBADCBADCBADCBOANn/Kfdz7l7+A6AYAwAYAwAYAwAXjT7p+fd7+fsQQAwgTghF2forvezX'
    '0EAMIE4KTdnqa73cszBADCBOCCXZ6qu9zJ8wTgotXHtfp9zCUAA6w6slXvYh0CMMhqY1vtHtYkAAOtMrpV7mB9AjDY7PHNfn'
    '/2IgA3mDVC4+ddX7MP+FR/x/jEf+ExfM4SgJvdGQLD5yoBeMjIEBg+owjAw/4d7/8EweC5iwBMZtzM5FsACBMACBMACBMACB'
    'MACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACB'
    'MACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACB'
    'MACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACB'
    'MACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACB'
    'MACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACB'
    'MACBMACBMACBMACBMACPsDhkRyDUVGTB8AAAAASUVORK5CYII='
)

app.layout = dmc.MantineProvider(
    children=[
        html.Div('dash html.Img'),
        html.Img(
            src=img_src
        ),
        html.Div('dmc.Image'),
        dmc.Image(
            src=img_src
        )
    ]
)

if __name__ == '__main__':
    app.run_server()

We get:

[AnnMarieW]

It looks like this is caused by the overly restrictive sanitizeUrl from Braintree here.

This was causing an issue in the Dash repo as well, and it was fixed by using this custom sanitizer based on the Braintree function but allows for data urls.

See the whole discussion here:plotly/dash#2764
See Dash PR plotly/dash#2833

[AnnMarieW]

Actually in the original dash PR to address the html props with xss vulnerability, it was determined that it was unnecessary to sanitize the url for html.Img. So it looks like this could be skipped for dmc.Image and dmc.BackgroundImage