You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Dash应用中图片与视频无法渲染问题求助

Dash应用媒体渲染异常问题排查求助

我开发的Dash应用遇到媒体渲染异常:所有浏览器中图片仅显示空白缩略图,视频仅显示空白播放器,但这些文件在本地文件夹手动打开时均可正常运行。以下是应用代码及渲染效果截图,请求帮忙排查问题。

import os
from dash import Dash, dcc, html, Input, Output
from dash.dependencies import State
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], title='Renderer')

app.layout = html.Div([
dbc.Row(
    dbc.Col(
        html.Div([
            html.H1("Photo and Video Viewer"),
            dcc.Dropdown(
                id='file-type-dropdown',
                options=[
                    {'label': 'Photos', 'value': 'photo'},
                    {'label': 'Videos', 'value': 'video'}
                ],
                value='photo'
            ),
            dcc.Dropdown(
                id='file-dropdown',
                options=[],
                multi=True
            ),
            html.Div(id='file-display')
        ]),
        width=6),
),
])


@app.callback(
Output('file-dropdown', 'options'),
Output('file-dropdown', 'value'),
Input('file-type-dropdown', 'value')
)

def update_file_dropdown(selected_type):
folder_path = 'D:/New Folder'  # Replace with the path to your folder
if selected_type == 'photo':
    files = [f for f in os.listdir(folder_path) if f.endswith(('.jpg', '.jpeg', '.png', '.gif'))]
else:
    files = [f for f in os.listdir(folder_path) if f.endswith(('.mp4', '.avi', '.mkv', '.mov'))]

file_options = [{'label': file, 'value': file} for file in files]

return file_options, None


@app.callback(
 Output('file-display', 'children'),
 Input('file-dropdown', 'value'),
 State('file-type-dropdown', 'value')
)

def display_selected_files(selected_files, selected_type):
 folder_path = 'D:/New Folder'  # Replace with the path to your folder

if not selected_files:
    return "Select files to display."

file_content = []

for file in selected_files:
    file_path = os.path.join(folder_path, file)

    if selected_type == 'photo':
        if file_path.endswith(('.jpg', '.jpeg', '.png', '.gif')):
            file_content.append(html.Img(src=file_path, style={'max-width': '100%'}))
    else:
        if file_path.endswith(('.mp4', '.avi', '.mkv', '.mov')):
            file_content.append(html.Video(src=file_path, controls=True))

return file_content


if __name__ == '__main__':
   app.run_server(debug=True, port=8060)

渲染效果截图

  • 图片渲染效果:
    图片显示空白缩略图
  • 视频渲染效果:
    视频显示空白播放器

内容的提问来源于stack exchange,提问作者kbsudhir

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.07 13:22:40