如何在Gradio中调整UI头部图片尺寸并加载本地图片？

一、修复gr.Image().style()报错问题 #

出现AttributeError是因为Gradio 3.x版本起已移除组件的style()方法，可通过以下两种方式替代：

1. 直接在组件初始化时设置宽高参数 #

import gradio as gr

with gr.Blocks() as app:
    # 直接通过width和height参数控制图片尺寸
    gr.Image("logo.png", label="Top Image", width=600, height=400)
    app.launch(server_name="0.0.0.0", server_port=7860, debug=True)

2. 使用自定义CSS精准控制（更灵活） #

import gradio as gr

# 为目标图片绑定自定义样式，elem_id用于关联CSS规则
with gr.Blocks(css="#header-logo {width: 600px !important; height: 400px !important;}") as app:
    gr.Image("logo.png", label="Top Image", elem_id="header-logo")
    app.launch(server_name="0.0.0.0", server_port=7860, debug=True)

二、解决HTML组件加载本地图片失败问题 #

浏览器无法直接访问服务器本地文件，需通过Gradio托管图片或将图片转为base64嵌入，以下是两种可行方案：

方案1：用隐藏的gr.Image组件托管图片 #

通过隐藏的Image组件让Gradio托管本地图片，再在HTML中引用其生成的URL：

import gradio as gr

def greet(name):
    return f"Hello {name}!"

with gr.Blocks() as demo:
    # 隐藏的Image组件，负责托管本地图片资源
    hidden_image = gr.Image("logo.png", visible=False)
    # 动态生成HTML，引用托管后的图片URL
    gr.HTML(lambda img_url: f"""
    <div style="text-align: center;">
        <img src="{img_url}" alt="Header Image" width="200" height="100">
    </div>
    """, inputs=hidden_image)

    name_input = gr.Textbox(label="Enter your name:")
    submit_button = gr.Button("Submit")
    output = gr.Textbox(label="Greeting:")

    submit_button.click(fn=greet, inputs=name_input, outputs=output)

demo.launch()

方案2：将图片转为base64直接嵌入HTML #

把本地图片编码为base64格式，直接写入HTML的src属性：

import gradio as gr
import base64

def greet(name):
    return f"Hello {name}!"

# 本地图片转base64编码函数
def img_to_base64(img_path):
    with open(img_path, "rb") as f:
        return f"data:image/png;base64,{base64.b64encode(f.read()).decode()}"

# 转换当前目录下的logo.png
logo_base64 = img_to_base64("logo.png")

with gr.Blocks() as demo:
    gr.HTML(f"""
    <div style="text-align: center;">
        <img src="{logo_base64}" alt="Header Image" width="200" height="100">
    </div>
    """)

    name_input = gr.Textbox(label="Enter your name:")
    submit_button = gr.Button("Submit")
    output = gr.Textbox(label="Greeting:")

    submit_button.click(fn=greet, inputs=name_input, outputs=output)

demo.launch()

内容的提问来源于stack exchange，提问作者Benjamin Geoffrey