要将HTML中的图片换到下一行显示，可以通过以下几种方法实现：

1. 使用<br>标签

最简单直接的方法是使用HTML的换行标签<br>。只需在<img>标签后添加<br>即可实现图片换行。

示例代码：

<img src="image.jpg" alt="示例图片">
<br>
<p>这是图片下方的文字。</p>

2. 使用CSS样式

通过CSS样式，可以将图片设置为块级元素（block），使其独占一行。使用display: block;属性即可实现。

示例代码：

<style>
  img {
    display: block;
  }
</style>
<img src="image.jpg" alt="示例图片">
<p>这是图片下方的文字。</p>

3. 使用CSS的浮动（float）属性

通过设置图片的float属性为left或right，可以使图片浮动到容器的左侧或右侧，随后在图片后添加<div>标签并清除浮动，从而实现换行。

示例代码：

<style>
  img {
    float: left;
  }
  .clear {
    clear: both;
  }
</style>
<img src="image.jpg" alt="示例图片">
<div class="clear"></div>
<p>这是图片下方的文字。</p>

4. 使用Flexbox布局

Flexbox布局提供了更灵活的排版方式，可以通过将图片的父容器设置为display: flex;并调整对齐方式来实现换行。

示例代码：

<style>
  .flex-container {
    display: flex;
    flex-direction: column;
  }
</style>
<div class="flex-container">
  <img src="image.jpg" alt="示例图片">
  <p>这是图片下方的文字。</p>
</div>

5. 使用CSS Grid布局

CSS Grid布局允许更精细地控制元素的位置和布局。通过将图片和文字分别放入不同的grid区域，可以轻松实现换行效果。

示例代码：

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
</style>
<div class="grid-container">
  <img src="image.jpg" alt="示例图片">
  <p>这是图片下方的文字。</p>
</div>

总结

根据实际需求选择合适的方法，<br>标签适用于简单场景，CSS样式（如display: block或float）适用于更复杂的布局需求，而Flexbox和Grid布局则提供了更灵活和现代的解决方案。