將 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 作為圖標/圖像的位置。