Issue Displaying Multiple Images with IPython.display

[s2t2]

Description

Hi, I am trying to render an IPYNB notebook in my Quarto book project. The IPYNB file has the following two cells:

import requests

drinks_url = "https://www.thecocktaildb.com/api/json/v1/1/filter.php?a=Non_Alcoholic"
response = requests.get(drinks_url)
drinks_data = response.json()

from IPython.display import Image, display

for drink in drinks_data["drinks"][0:5]:
    print(drink["idDrink"], drink["strDrink"])
    display(Image(url=drink["strDrinkThumb"], height=100))

In this notebook, we are looping through a list of items and displaying an Image for each item.

In Colab, the notebook displays these images inline where the display function calls are (which is the intended behavior).

However in Quarto, all the images show up at the bottom.

My intention is to see the original output from the notebook. Please advise.

[cscheid]

Instead of print() for the text, use display(Code(...))

My understanding is that IPython uses a mechanism for interleaving partial stream output that Quarto doesn't support.

---
format: html
---

```{python}
from IPython.display import Code
Code("hello")
```

[s2t2]

Thanks, however my question is specifically about using .ipynb, as the real notebook I am trying to use is colab-specific and can't be reproduced as a local .qmd file

[s2t2]

The display(Code(...)) approach from @cscheid does work using .ipynb documents. I updated the linked notebook to contain this approach. One caveat is I believe this can only display a single string value.

However it will require a workaround requiring a duplicated code cell.

The first code cell contains the desired print code and no outputs. The second code cell will need the display(Code(...)) approach with code hidden and outputs visible.

[cderv]

@s2t2 Just to be clear, I also tried using the .ipynb file I downloaded from Google Collab when I said

If I download the .ipynb from you collab, and call quarto render test.ipynb then cell are not executed again, results are used and I get the right order

There is an issue re-executing notebook from Collab locally

• Rendering ipynb from google collab fails because language key missing in kernelspec #12374

But manually fixing the .ipynb file, I managed to render and wasn't able to reproduce. So I am wondering what is triggering the issue you see in the first place

[s2t2]

Perhaps there is a difference between rendering and previewing. I have been previewing, but I will try rendering and let you know if it provides different results.

[s2t2]

Rendering and previewing both show the images at the bottom for me.

[s2t2]

Also as a side note, when I was doing the display(Code(...)) workaround, I noticed it was syntax highlighting some of the simple text I wanted to print. So instead, I found that display(Mardown(...)) produced results that look more like the original print statement results.

[s2t2]

Although unfortunately when quarto renders the displayed Markdown or HTML, it adds some <p> tags that don't exist when the content is displayed in the notebook. These tags create some unwanted vertical space, even if I try to display(HTML("<span>...</span>")