图像
图像是某物的图形表示（例如照片或插图）。
示例
- Python
import flet as ft
def main(page: ft.Page):
page.title = "图像示例"
page.theme_mode = ft.ThemeMode.LIGHT
page.padding = 50
page.update()
img = ft.Image(
src=f"/icons/icon-512.png",
width=100,
height=100,
fit=ft.ImageFit.CONTAIN,
)
images = ft.Row(expand=1, wrap=False, scroll="always")
page.add(img, images)
for i in range(0, 30):
images.controls.append(
ft.Image(
src=f"https://picsum.photos/200/200?{i}",
width=200,
height=200,
fit=ft.ImageFit.NONE,
repeat=ft.ImageRepeat.NO_REPEAT,
border_radius=ft.border_radius.all(10),
)
)
page.update()
ft.app(target=main)
属性
border_radius
将图像剪裁为圆角。border_radius 是 BorderRadius 类的实例。
color
如果设置了，将此颜色与每个图像像素混合使用 color_blend_mode。
color_blend_mode
用于将 color 与图像组合的方式。属性值是 BlendMode 。
默认值为 BlendMode.COLOR。在混合模式方面，颜色是源，此图像是目标。
error_content
如果无法从源加载图像，则显示备用的 Control。
exclude_from_semantics
是否将此图像排除在语义之外。默认为 False。
filter_quality
图像的渲染质量。值是 FilterQuality 。默认为 LOW。
fit
如何将图像镶入分配的空间。
该值是 ImageFit 。默认为 NONE。
gapless_playback
当图像提供者更改时，是否继续显示旧图像（True），或者短暂地显示空白（False）。默认值为 False。
height
如果设置了，要求图像具有此高度。
如果未设置，图像将选择最能保持其固有宽高比的大小。
强烈建议要么同时指定宽度和高度，要么将图像放置在设置了紧凑布局约束的上下文中，以便图像在加载时不会改变大小。如果无法提前知道图像的确切尺寸，请考虑使用 fit 来调整图像的呈现以适应给定的宽度和高度。
semantics_label
图像的语义描述。用于向 Android 上的 TalkBack 和 iOS 上的 VoiceOver 提供图像描述。
src
图像 URL。这可以是外部 URL，例如 https://picsum.photos/200/200，也可以是内部 URL 用于引用应用程序资产，例如 /my-image.png。
您可以在 flet.app() 调用中指定 assets_dir 来设置应用程序资产的位置，这些 资产应该对应用程序可用。assets_dir 可以是相对于您的 main.py 目录的路径，也可以是绝对路径。例如，考虑以下程序结构：
/assets
/images/my-image.png
main.py
您可以如下访问您的图像：
import flet as ft
def main(page: ft.Page):
page.add(ft.Image(src=f"/images/my-image.png"))
flet.app(
target=main,
assets_dir="assets"
)
src_base64
从 Base64 编码的字符串显示图像，例如：
import flet as ft
def main(page: ft.Page):
page.add(ft.Image(src_base64="iVBORw0KGgoAAAANSUhEUgAAABkAAAAgCAYAAADnnNMGAAAACXBIWXMAAAORAAADkQFnq8zdAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA6dJREFUSImllltoHFUYx3/fzOzm0lt23ZrQ1AQbtBehNpvQohgkBYVo410RwQctNE3Sh0IfiiBoIAjqi6TYrKnFy4O3oiiRavDJFi3mXomIBmOxNZe63ay52GR3Zj4f2sTEzmx3m//TYf7/c35zvgPnO6KqrESXqpq3muocAikv6m+/zytj3ejik1VN21G31YA9CgJ6xC+bMyQZPVCuarciPAMYC99V6Vw5pLbFSibHmlVoRVj9P3cmPBM8tSJI/M6mzabpfoAQ9fIF7WK4bd5vvuFnLGgy2vi0abg94A0AcJGvMq3hDxGRyar9r4F+iLAm0yIiRk8m37tctS1WsrIhhrI30+Srmg+J87OXUf3lWGS1q89dC6ltsSanxk4Aj2QBABii96300g87P/rtlrWr8l+vyDMfdlXSyyEikqxsiOUAQJCBhfHdXRfCq1LSsSlcWG+KBAGStvvrMkgiuv8lUc2mREukPwLUfHG+uTQv8Eown7VL3XlbB
xYhf1c17hbVF3MDwA9bts280TnaU1YYqPby07aeFlUlHt27wSQ4CLo+F8AvoTCvHmyKF+ZbEb/M77P2LgvAwmrTHAHflN3KZxVbMC2jMFNOpgPnrMSOhvvFkMezXdwV4ePbtvHtxnJAMQ0j4JtVnO+eLb5oiSlt5HDbv7t1O90lpYCCCKbhfzW5kAIwUAazR0BlfII8Ow0I6uoVmI9MyAMwbMs8CExmDbk4zgu931MyO4OI4KrYflkRjOoTI+uM9d1vjotwKPu9QMk/sxzuO8POiVFcdZ1M2YBVsMEAKOqLvaPIe7mACuw0z/80SMH58SMplxlfiDhVi7dw2pltRhjKBQTQdrSja2KKTfE551NHuaZ0QVPvWYQUn31/Vm2nDvgjF4grVJx6suSvrvrSJ/6cSW2Oz9mf264uNrB806xZ1k/CZ49dUKgDEtlCROX2hfHpx8pGuuo3PpqYulw8fjndOp1yhgtNKRevJ1FyR2Ola+jXAjdnwTkZ6o896GdWdxDw7IxFg+0DpmXchTKSBWQnIuJn9u4j7dt+13UfHXEkXQOcuQ4kMhVtqsgUyPiQiPQfHw1NB2sRjmXKuTg1NwwBYLhtPtQX26eqTwGXPDOqvmcC4Hnwfrrad94GrVsOYTqUTkQY+iTlNe/6O1miSP/x0VB/+wMIDwHn/vtV1iQC4Xv95uUEWVCoL9Y5Z+gdovoyMHUFJHv88jmVy0vTuw7cZNv2YaA61Bfb7ZX5F8SaUv2xwZevAAAAAElFTkSuQmCC"))
ft.app(target=main)
使用 base64 命令（Linux、macOS、WSL）将文件转换为 Base64 格式，例如：
base64 -i <image.png> -o <image-base64.txt>
在 Windows 上，您可以使用 PowerShell 将字符串编码为 Base64 格式：
[convert]::ToBase64String((Get-Content -path "your_file_path" -Encoding byte))
repeat
如何绘制布局边界未覆盖的任何部分。
该值是 ImageRepeat 。默认为 NO_REPEAT。
semantics_label
此图像的语义标签。
tooltip
当鼠标悬停在图像上时显示的文本。
width
如果设置了，要求图像具有此宽度。
如果未设置，图像将选择最能保持其固有宽高比的大小。
强烈建议要么同时指定宽度 和高度，要么将图像放置在设置了紧凑布局约束的上下文中，以便图像在加载时不会改变大小。如果无法提前知道图像的确切尺寸，请考虑使用 fit 来调整图像的呈现以适应给定的宽度和高度。