在 ipyvuetify 中使用图像作为图标

Question

我正在使用 ipyvuetify 编写应用程序代码以使用 voila 呈现，我想使用图像作为页脚的图标（或将来用于按钮）。知道怎么做吗？

这是图标的代码

v.Footer( absolute = False,
          class_="font-weight-medium",
          children= [v.Col(class_="text-center", cols="12", children=[v.Icon(children=['fingerprint']),'BMW - 2020 - alpha version 0.0. powered by Soft company PPP'])]

这将生成：

我想使用我自己的标志而不是预定义的指纹。那么如何加载图像并为字体指定相对大小。

谢谢

Answer 1

目前似乎没有什么好方法可以简单地将相对 link 传递给 ipyvuetify 并让它显示图像（如果有的话）。

我发现的解决方法是使用 ipywidgets 打开文件并将其作为对象传递给 ipyvuetify：

import ipywidgets as widgets
file = open( 'LINK_TO_YOUR_ICON', 'rb')
image = file.read()
img = widgets.Image(value=image, format='png')

v.Footer( absolute = False,
          class_="font-weight-medium",
          children= [v.Col(class_="text-center", cols="12", children=[img,'BMW - 2020 - alpha version 0.0. powered by Soft company PPP'])]
        )

检查这是否解决了您的问题 ;)

Answer 2

通过对 Christoph Weiss-Schabers 的回答进行一些修改，可以使用 ipyvuetify 完成：

import base64
import ipyvuetify as v

file = open( 'LINK_TO_YOUR_ICON', 'rb')
image = file.read()
image_base64 = base64.b64encode(image).decode('ascii')
img = v.Img(src=f'data:image/png;base64,{image_base64}')

v.Footer( absolute = False,
          class_="font-weight-medium",
          children= [v.Col(class_="text-center", cols="12", children=[img,'BMW - 2020 - alpha version 0.0. powered by Soft company PPP'])]
        )

或在线图片：

v.Img(src='https://homepages.cae.wisc.edu/~ece533/images/fruits.png', width='100', height='100')

在 ipyvuetify 中使用图像作为图标

use an image as icon in ipyvuetify

python

vuetify.js

ipywidgets

voila