跳到主要内容

图片 - Image

图片是某物的图形表示（例如照片或插图）。

示例​

在线示例

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​

将图像裁剪为具有圆角的形状。有关更多信息和示例，请参见 Container.border_radius。

color​

如果设置了该值，图像中的每个像素将与 color_blend_mode 使用的 color 混合。

color_blend_mode​

用于将 color 与图像组合。

默认值是 BlendMode.COLOR。从混合模式的角度来看，color 是源图像，而该图像是目标图像。

有关可能的混合模式值，请参见 ShaderMask.blend_mode。

error_content​

如果无法从源加载图像，则显示回退的 Control。

fit​

如何将图像向内缩放以适应分配的空间。

属性值为 ImageFit 枚举，可选值有：NONE（默认值）、CONTAIN、COVER、FILL、FIT_HEIGHT、FIT_WIDTH、SCALE_DOWN。

gapless_playback​

当图像提供程序更改时，是否继续显示旧图像 (True)，还是短暂地显示空白 (False)。默认值为 False。

height​

如果设置了该值，要求图像具有此高度。

如果没有设置此值，图像将选择最佳大小，以保持其固有的纵横比。

备注

强烈建议同时指定宽度和高度，或将图像放置在设置了紧密布局约束的上下文中，以便图像在加载时不改变大小。如果无法预先知道图像的精确尺寸，请考虑使用 fit 来调整图像的渲染以适应给定的宽度和高度。

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​

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+uTQv8Eown7VL3XlbBxYhf1c17hbVF3MDwA9bts280TnaU1YYqPby07aeFlUlHt27wSQ4CLo+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​

repeat属性用于指定如何绘制布局边界未覆盖的部分。

属性值是ImageRepeat枚举，支持的值有：NO_REPEAT（默认值）、REPEAT、REPEAT_X、REPEAT_Y。

semantics_label​

semantics_label属性用于为图像设置语义标签。

tooltip​

tooltip属性用于在鼠标悬停在图像上时显示的文本。

width​

如果设置了width属性，将强制图像具有指定的宽度。

如果未设置width属性，图像将选择一个最佳大小以保持其固有的纵横比。

备注

强烈建议同时指定width和height，或者将图像放置在设置了紧凑布局约束的上下文中，以便图像在加载过程中不会改变大小。如果事先不知道图像的确切尺寸，可以考虑使用fit属性来适应给定的宽度和高度，使图像的渲染适应其中。