how to show wordcloud image on dash web application

I need to render a wordcloud on my dash application. According to this thread https://community.plot.ly/t/solved-is-it-possible-to-make-a-wordcloud-in-dash/4565, there is no wordcloud build-in component in dash. One workaround is to use WordCloud module to produce the wordcloud as image and use dash_html_components.Img to show on layout.

I'm new to Dash. Not sure how I can render the image. Do I need to save wordcloud as temp image everytime I produce a wordcloud?

Really appreciate it if anyone with some expertise in Dash can help with that.

The code is below:

import dash
import dash_core_components as dcc
import dash_html_components as html

print(dcc.__version__) # 0.6.0 or above is required

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

dfm = pd.DataFrame({'word': ['apple', 'pear', 'orange'], 'freq': [1,3,9]})

app.layout = html.Div([
    html.Img(id = 'image_wc')
])

# function to make wordcoud from word frequency dataframe
def plot_wordcloud (data):
        d = {}
        for a, x in data.values:
            d[a] = x
        wc = WordCloud(background_color='black',
                    width=1800,
                    height=1400).generate_from_frequencies(frequencies=d)   
        return (wc)

@app.callback(dash.dependencies.Output('image_wc', 'img'))
def make_image ():
    img = plot_wordcloud (data = dfm)
    return (img)


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

from how to show wordcloud image on dash web application