指定端口启动Flet Web应用时图片加载失败问题求助

问题核心：直接用本地绝对路径当图片源时，指定端口启动的Flet Web服务没法把本地文件路径映射成浏览器能访问的URL。默认端口可能因特殊处理暂时兼容，但这不是标准Web开发方式。

推荐解决方案：用Flet资源目录 #

1. 在项目根目录建个assets文件夹，把1001.jpg放进去。
2. 修改代码，启动时通过assets_dir参数指定资源目录，图片用相对路径引用：

import flet as ft

def main(page: ft.Page):
    # 引用assets目录下的图片
    xImg = ft.Image(src="1001.jpg", width=250, height=250, fit=ft.ImageFit.CONTAIN)
    page.add(xImg)

if __name__ == "__main__":
    ft.app(target=main, port=5081, assets_dir="assets")

替代方案：将图片转为Base64嵌入 #

如果不想建资源目录，可以把图片内容编码成Base64字符串直接嵌入页面，不依赖外部文件服务：

import flet as ft
import os
import base64

def main(page: ft.Page):
    img_path = os.path.join(os.getcwd(), '1001.jpg')
    # 读取图片并转为Base64格式
    with open(img_path, "rb") as f:
        img_base64 = base64.b64encode(f.read()).decode()
    # 使用data URL作为图片源
    xImg = ft.Image(src=f"data:image/jpeg;base64,{img_base64}", width=250, height=250, fit=ft.ImageFit.CONTAIN)
    page.add(xImg)

if __name__ == "__main__":
    ft.app(target=main, port=5081)

说明：

• 资源目录方案是Flet官方推荐的静态资源管理方式，适合有多张静态文件的项目，任意端口下都能正常加载。
• Base64方案适合单张临时图片，不用额外管理目录，但会增加页面体积。

内容的提问来源于stack exchange，提问作者觀眾A