Formatting a tag is not working with Thymeleaf

Question

Why does this piece of code display the image before the text:

<p>
  <span>
    <img src="../assets/images/favorite.svg" height="12px"/>
  </span>
  Baked Alaskan Salmon with Asparagus
</p>

But when formatted with Thymeleaf it does not display the image:

<p th:text="@{' ' + ${recipe.name}}">
  <span>
    <img src="../assets/images/favorite.svg" height="12px"/>
  </span>
  Baked Alaskan Salmon with Asparagus
</p>

Answer 1

Try using Thymleaf's th:inline="text" tag to display html content inside of Thymleaf processed tags. Following code should work, i have not tested it though

<p th:inline="text">
    [[@{' ' + ${recipe.name}}]]
    <span>
        <img src="../assets/images/favorite.svg" style="height:12px"/>
    </span>
    Baked Alaskan Salmon with Asparagus
</p>

For more description on how inline tag works check out the docs