Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Can't embed any other image than the plotly logo. I need an Easter Miracle

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 :slight_smile:

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')