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
相关产品推荐
相关产品推荐

