如何在 Jupyter Notebook 中以交互方式在图像之间切换答案

【问题标题】：How to switch between images in interactive way in Jupyter Notebook如何在 Jupyter Notebook 中以交互方式在图像之间切换
【发布时间】：2021-06-17 21:13:37
【问题描述】：

如果我在 Jupyter Notebook Markdown 单元格中编写以下内容，我会看到保存在“Images”文件夹中的图像

<img src="Images/T1.png">

但是，我想通过在 Markdown 单元格中放置一些代码，以交互方式在保存在我的 Images 文件夹中的 3 张图像之间切换，T1.png、T2.png 和 T3.png。任何人都可以使用 Jupyter Notebook 降价单元帮助我做到这一点吗？我正在尝试这个（我在stackoverflow上找到的）

<input type="radio" name="T1" class="radio1" checked/>
<input type="radio" name="T2" class="radio2" />
<input type="radio" name="T3" class="radio3" />


<div class="image1">
  <img src="Images/T1.png">
</div>
<div class="image2">
  <img src="Images/T2.png">
</div>
<div class="image3">
  <img src="Images/T3.png">
</div>

但是我将所有图像像这样一个接一个地堆叠起来（我希望它们一次一个地出现在屏幕上）：

提前致谢！

【问题讨论】：

标签： html image jupyter-notebook markdown python-interactive

【解决方案1】：

您需要一些 Markdown 单元格不支持的 javascript/css。相反，只需在 python 中显示一个 HTML 文档。在这里你有：

from IPython.core.display import display, HTML

html = """
    Select an Image:
    <input type="radio" name="images" onclick="show1();" checked>Image 1</input>
    <input type="radio" name="images" onclick="show2();">Image 2</input>
    <input type="radio" name="images" onclick="show3();">Image 3</input>


    <div id="image1">
      <img src="Images/T1.png">
    </div>
    <div id="image2">
      <img src="Images/T2.png">
    </div>
    <div id="image3">
      <img src="Images/T3.png">
    </div>
    
    <script>
    function show1(){
      document.getElementById('image1').style.display ='block';
      document.getElementById('image2').style.display ='none';
      document.getElementById('image3').style.display ='none';
    }
    function show2(){
      document.getElementById('image2').style.display ='block';
      document.getElementById('image1').style.display ='none';
      document.getElementById('image3').style.display ='none';
    }
    function show3(){
      document.getElementById('image3').style.display ='block';
      document.getElementById('image1').style.display ='none';
      document.getElementById('image2').style.display ='none';
    }
    show1()
    </script>
"""
display(HTML(html))

【讨论】：