I tried everything and read the other threads but fact is, when I follow the example and use
-
dbc.Row(
-
[
-
dbc.Col(html.Img(src="https://images.plot.ly/logo/new-branding/plotly-logomark.png", height="30px")),
-
dbc.Col(dbc.NavbarBrand("foo", className="ml-2")),
-
],
-
align="center",
-
no_gutters=True,
-
),
it works with out issues but when I use any other image link e.g.
-
dbc.Row(
-
[
-
dbc.Col(html.Img(src="https://i.imgur.com/HIbPKIV.png", height="30px")),
-
dbc.Col(dbc.NavbarBrand("foo", className="ml-2")),
-
],
-
align="center",
-
no_gutters=True,
-
),
then the image just will not be displayed with me seeing a white X on a black square instead
Does anyone have an idea what I could do to fix this?
Hi @CokeBoo welcome to the forum! For the sake of debugging, did you try to put the image in a normal html.Div
to see if it works as expected?
That does not work either.
html.Div(html.Img(src=“https://i.imgur.com/HIbPKIV.png”)),
while this works without issue:
html.Div(html.Img(src=“https://images.plot.ly/logo/new-branding/plotly-logomark.png”)),
Could it be possible that the image hosting site or the image itself has to have certain attributes? I’m really stuck here even though this should be a simple issue.
I think Imgur blocks you from doing this sort of thing so that you can’t easily rehost their content.
You’d be best off downloading it and putting it in your assets/
folder and serving locally.
Yes I think @tcbegley is right; I made a mock app with just this imgur image and it worked the first time I launched the app (and I was like: so it works what’s the big deal ;-)) and then it suddenly stopped working when I refreshed.
Thanks for your input guys. I was not sure how to use the assets/ folder but instead I did this and it worked:
- test_png = ‘test.png’
- test_base64 = base64.b64encode(open(test_png, ‘rb’).read()).decode(‘ascii’)
and then in the Navbar container I used:
- dbc.Col(html.Img(src=‘data:image/png;base64,{}’.format(test_base64), height=“30px”)),
I guess I should have just continued trying other approaches
Check out the docs, specifically the section “Embedding images in your Dash apps”. You can create a folder called assets/
, place the image in there (save it as something like assets/image.png
), then just refer to it in your Dash app like this:
html.Img(src='/assets/image.png')