在 ipyvuetify 中使用图像作为图标答案

【问题标题】：use an image as icon in ipyvuetify在 ipyvuetify 中使用图像作为图标
【发布时间】：2021-02-22 18:34:42
【问题描述】：

我正在使用 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'])]

这将生成：

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

谢谢

【问题讨论】：

标签： python vuetify.js ipywidgets voila

【解决方案1】：

通过对 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')

【讨论】：

【解决方案2】：

目前似乎没有什么好方法可以简单地将相对链接传递给 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'])]
        )

检查这是否解决了您的问题；）

【讨论】：