在我的应用中,我需要在点击图片时更改图片。我该怎么做?
文件夹结构:
- app.py
- assets/
|-- custom-script.js
app.py
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Img(
className="myImg",
id="speak_btn",
src="assets/img/microphone.png",
style={},
),
])
自定义脚本.js
$(document).ready(function () {
$(".myImg").click(function () {
if ($(this).attr("src") === "assets/img/microphone.png")
$(this).attr("src", "assets/img/voice_gif.gif");
else if ($(this).attr("src") === "assets/img/voice_gif.gif")
$(this).attr("src", "assets/img/microphone.png");
})
});
这是理解为什么我把它放在assets文件夹中的指南 https://dash.plotly.com/external-resources
custom-script.js
已经过测试并且可以正常工作。需要帮助使其适应冲刺。谢谢
答案 0 :(得分:1)
您可以像这样使用 app.clientside_callback()
来运行 JS 客户端:
import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
html.Img(id='speak_btn', src='assets/img/microphone.png', className='myImg', n_clicks_timestamp=0)
])
app.clientside_callback(
"""
function(click, src) {
if ( src == 'assets/img/microphone.png' && click != 0 ) {
return 'assets/img/voice_gif.gif';
} else {
return 'assets/img/microphone.png';
}
}
""",
Output('speak_btn', 'src'),
[Input('speak_btn', 'n_clicks_timestamp')],
[State('speak_btn', 'src')]
)
if __name__ == '__main__':
app.run_server()
您也可以在没有 JS 的情况下完成此任务,方法是每次更新 src
时编写一个回调来更改 html.Img
的 n_clicks_timestamp
属性,如下所示:
import dash
from dash.dependencies import Input, Output, State
import dash_html_components as html
from dash.exceptions import PreventUpdate
app = dash.Dash(__name__)
microphone = 'assets/img/microphone.png'
voice_gif = 'assets/img/voice_gif.gif'
app.layout = html.Div([
html.Img(id='speak_btn', src=microphone, className='myImg', n_clicks_timestamp=0)
])
@app.callback(
Output('speak_btn', 'src'),
[Input('speak-btn', 'n_clicks_timestamp')],
[State('speak_btn', 'src')])
def change_img(click, src):
if not click: raise PreventUpdate
return gif if src==microphone else microphone
if __name__ == '__main__':
app.run_server()