Images in Tooltips for tables do not display

Dash Python
1

Hello:
First of all thank you very much for such an awesome product.
I am taking my first steps and would like to ask my 2nd question.

I would like to reproduce the example ‘Images in Tooltips’ found at DataTable Tooltips | Dash for Python Documentation | Plotly.
For this I need to replace the pictures. When I do the images do not display.

The behavior is similar to the issue discussed here:

I was able to reproduce feng2016’s example, so may be I would need base64 encoding for my images.
How would I do this with the following command?

‘shop’: {
‘value’: ‘Location at Bakersfield\n\nBakersfield’.format(
app.get_relative_path(‘/images/images.jpg’)
),
‘type’: ‘markdown’
}

Any comment is highly appreciated.
Best regards,
Markus

2

Hi @metma,

The images aren’t displaying because you seem to be missing the required curly braces {} in the string that is used by .format() to inject the URL.

In short, you simply aren’t injecting the string. Here’s a working example for your case that uses an f-string instead, which is much easier to understand and faster than using .format()

Also, your example lacks the proper markdown syntax. To inject an image via markdown, you must have the following syntax in the string: ![alt text](image_url).

'shop': {
    'value': f'Location at Bakersfield\n\n![Bakersfield]({app.get_relative_path("/images/images.jpg")})',
    'type': 'markdown'
}
2 Likes
3

Dear 3d65:
That worked.
Thank you so much!
Markus