thymeleaf中导入editor.md的Markdown不能显示图片

Question

thymeleaf中导入editor.md的Markdown遇到的问题

在thymeleaf中引入后端传过来的图片数据，然后在评论区中显示，问题在于只能显示出第一张，第二张图片开始就不能显示，请问该怎么解决？

下面是代码

                                
                                <div th:each="reply : ${comment.content}">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                                        style="width: 50%;" th:id="${reply}">
                                        <textarea style="display: none;" th:text="${reply}"></textarea>
                                    </div>
                                    <script type="text/javascript">
                                        $(function() {
                                          editormd.markdownToHTML(
                                            "${comment.content}",{});
                                        });
                                     </script>
                                </div>

其中reply是循环出来的图片地址

Answer 1

根据您提供的代码，我猜测您使用了Editor.md这个Markdown编辑器，但是在Thymeleaf中无法正确显示所有的图片。这可能是因为编辑器在渲染Markdown时，只会渲染第一张图片，而忽略了其他的图片。

要解决这个问题，您可以尝试在Thymeleaf中使用一个循环来遍历所有的图片，并将它们渲染到HTML中。具体来说，您可以使用一个<img>标签来显示图片，然后使用Thymeleaf的th:each指令来循环遍历所有的图片地址，将它们依次渲染到HTML中。

以下是示例代码：

<div th:each="reply : ${comment.content}">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="width: 50%;" th:id="${reply}">
        <textarea style="display: none;" th:text="${reply}"></textarea>
    </div>
    <div th:each="img : ${#strings.arraySplit(reply, ',')}">
        <img th:src="${img}" />
    </div>
</div>

在这个示例中，我们使用了#strings.arraySplit函数来将逗号分隔的图片地址转换为一个数组，然后使用th:each指令来循环遍历这个数组，并将每个图片地址渲染到一个<img>标签中。

希望这个解决方案能够帮助到您。如果您还有其他问题，请随时提出，我会尽力回答。
https://cool-js.com/