Question

我希望将图像作为data：URI嵌入到Dash Datatable中，如下例所示。我从此post借用了嵌入。我正在使用下面代码中未包含的另一个库动态创建图像。当我使用

运行Dash服务器时

python app.py

我得到一个带有编码字符串而不是图像的数据表。我认为使用'presentation'：'markdown'（在dash documentation的列部分中）会起作用，但不幸的是，它不会起作用。

我还尝试将网址包装在短划线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可以工作，我更喜欢这种方法，但是我认为我现在将其发布为一个可能的答案。

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

1 个答案: