将 base64 编码图像嵌入 Dash 数据表

Question

我希望将图像作为 data:URI 嵌入到 Dash 数据表中，如下例所示。 我从这篇文章中借用了嵌入。 我正在使用下面代码中未包含的另一个库动态创建图像。 当我使用运行 Dash 服务器时

python app.py

我得到一个带有编码字符串而不是图像的 data.table。 我认为使用 'presentation': 'markdown'（在破折号文档的列部分）会起作用，但不幸的是没有。

我还尝试将 url 包装在破折号 html.Img 组件中，但这似乎也不起作用。

对此有任何帮助将不胜感激！ 谢谢

import dash
import dash_table
import pandas as pd


url1 = '![Hello World](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC)'

data = [['Item 1', url1], ['Item 2', url1]]

# Create the pandas DataFrame 
df = pd.DataFrame(data, columns = ['Name', 'Image']) 

app = dash.Dash(__name__)


app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": 'Name', "id": 'Name'},
    {
            'id': 'Image',
            'name': 'Image',
            'presentation': 'markdown',
        },
    ],
    #fixed_columns={ 'headers': True, 'data': 1 },
    data=df.to_dict('records'),

)

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

Answer 1

看起来像在本地添加资产文件夹并在其中转储图像文件与显示有关

如果我将上面代码中的 url1 行替换为如下所示：

url1 = '![myImage-1](assets/test.png)'

并确保我在应用程序行中添加了“assets_folder”的位置

app = dash.Dash(__name__, assets_folder='assets')

图像将显示在表格的每一行中。 理想情况下，数据 uri 会起作用，我更喜欢这种方法，但我想我现在会将此作为潜在答案发布。

Answer 2

对于dash==1.21.0 ，如果您使用 HTML 标记指定图像，则markdown_options参数可以解决此问题。 不幸的是，根据DataTable 文档，该解决方案还创建了一个 XSS 漏洞。

代码：

import dash
import dash_table

# base64 image string
img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC"

# add html
img = f"<img src={img}>"

# make app
data = [{"Image": img, "Text": "test"}]

app = dash.Dash(__name__)
app.layout = dash_table.DataTable(
    columns=[
        {"id": name, "name": name, "presentation": "markdown"}
        for name in data[0]
    ],
    data=data,
    markdown_options={"html": True}  # dangerous but works
)

if __name__ == "__main__":
    app.run_server(debug=True)

破折号应用截图：

另一种选择是使用引导程序：显然，使用dbc而不是dash_table在表中显示图像要容易得多。

Answer 3

（注意：请考虑到这种方法会让您面临 XSS 漏洞）

我遇到了同样的问题，现在我已经设法解决了（需要注意的一件事，我正在使用 Django 框架来做这件事，但这无关紧要）。

我的方法是创建一个字典列表（在一个名为columns_format的变量中，您可以随意调用它）我在其中定义了列名和 id，并在字典中（其中id等于'icons' ，再次是你的可以称为不同的东西）是您必须首先插入参数表示并将其等于'markdown' 的地方。

columns_format = [
    dict(id = 'icons', name = '', presentation='markdown'),
    dict(id = 'symbol', name='Symbol'),
    dict(id = 'name', name='Coins'),

在columns_format变量中指定列后，您必须将markdown_options参数设置为'html': True ，然后将columns参数设置为等于之前创建的columns_format变量。

app.layout = dash_table.DataTable(
    markdown_options = {
        'html': True
    },
    data = coins_df,
    columns = columns_format,
)

必须发生的事情（如果您从链接引用图像是将其写入 html 格式，如下所示：

<img src="https://cdn.coinranking.com/bOabBYkcX/bitcoin_btc.svg" style="height: 30px; width:30px;"/>

所以在你希望图片出现的每一列中必须是上面的 html 格式（高度和宽度可选但推荐）

我下面的破折号数据表有加密货币的图标/图像，除了它们的符号引用 url 作为图标/图像的位置。