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是循环出来的图片地址
根据您提供的代码，我猜测您使用了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/
下面是我的完整的代码，供参考
```html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${question.title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- css -->
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="/css/community.css" />
<link rel="stylesheet" href="/css/editormd.preview.min.css" />
<link rel="stylesheet" href="/css/editormd.min.css" />
<!-- js -->
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/bootstrap.min.js" type="application/javascript"></script>
<script src="/js/comment.js" type="application/javascript"></script>
<script src="/js/community.js" type="application/javascript"></script>
<script src="/js/editormd.min.js" type="application/javascript"></script>
<script src="/js/lib/marked.min.js"></script>
<script src="/js/lib/prettify.min.js"></script>
</head>
<body>
<div th:insert="~{navigation :: nav}"></div>
<div class="container-fluid main profile">
<div class="row">
<!-- 左边主要内容 -->
<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
<!-- 正文 -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h4 class="question-title">
<span th:text="${question.title}"></span>
</h4>
<span class="text-desc"> 作者: <span
th:text="${question.user.name}"></span> | 发布时间: <span
th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd')}"></span>
| 阅读数: <span th:text="${question.viewCount}"></span>
</span>
<hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- 内容 -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
style="width: 50%;" id="question-view">
<textarea style="display: none;" th:text="${question.description}"></textarea>
</div>
<script type="text/javascript">
$(function() {
editormd.markdownToHTML("question-view", {});
});
</script>
<!-- 标签 -->
<hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<span class="label label-info question-tag"
th:each="tag : ${question.tag.split(',')}"> <span
class="glyphicon glyphicon-tags"></span> <span
class="label label-info" th:text="${tag}"></span>
</span>
</div>
<!-- 编辑 -->
<hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a th:href="@{'/publish/'+${question.id}}"
class="community-menu pull-left"
th:if="${session.user != null && session.user.id == question.creator}">
<span class="glyphicon glyphicon-pencil" aria-hidden="true">编辑</span>
</a>
</div>
<hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
<!-- 回复 -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h4>
<span th:text="${question.commentCount}"></span> 个回复
</h4>
<hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comments"
th:each="comment : ${comments}">
<div class="media">
<div class="media-left">
<a href="#"> <img class="media-object img-rounded"
th:src="${comment.user.avatarUrl}"></a>
</div>
<div class="media-body" th:id="${'comment-body-' + comment.id}">
<h5 class="media-heading">
<span th:text="${comment.user.name}"></span>
</h5>
<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.substring(img.indexOf('(') + 1, img.indexOf(')'))}" />
</div>
</div>
<div class="menu">
<span class="glyphicon glyphicon-thumbs-up icon"></span> <span
th:data-id="${comment.id}" onclick="collapseComments(this)"
class="comment-icon"> <span
class="glyphicon glyphicon-comment"></span> <span
th:text="${comment.commentCount}"></span>
</span> <span class="pull-right"
th:text="${#dates.format(comment.gmtCreate,'yyyy-MM-dd')}"></span>
</div>
<!-- 二级评论 -->
<div
class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse sub-comments"
th:id="${'comment-'+comment.id}">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<input type="text" class="form-control" placeholder="评论一下..."
th:id="${'input-'+comment.id}">
<button type="button"
class="btn btn-success btn-sm pull-right"
onclick="comment(this)" th:data-id=${comment.id}>评论</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 回复输入框 -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h4>提交回复</h4>
<hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12 comment-sp">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
id="comment_section">
<div class="media">
<div class="media-left">
<a href="#"> <img class="media-object img-rounded"
th:src="${question.user.avatarUrl}">
</a>
</div>
<div class="media-body">
<h5 class="media-heading">
<span th:text="${question.user.name}"></span>
</h5>
</div>
</div>
<input type="hidden" id="question_id" th:value="${question.id}">
<div class="form-group" id="question-editor">
<label for="description"></label>
<textarea name="description" id="description"
style="display: none;" class="form-control"
th:text="${description}" cols="30" rows="10"></textarea>
</div>
<!-- 富文本 -->
<script type="text/javascript">
$(function() {
var editor = editormd("question-editor", {
width : "100%",
height : 350,
autoHeight : false,
path : "/js/lib/",
delay : 0,
watch : false,
placeholder : "请输入评论描述...",
imageUpload : true,
imageFormats : [ "jpg", "jpeg", "gif",
"png", "bmp", "webp" ],
imageUploadURL : "/img/imgUpLoad"
});
});
</script>
<button type="button" class="btn btn-success btn-comment"
onclick="post();">回复</button>
</div>
</div>
<!-- 右边信息块 -->
</div>
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12"
th:id="${'comment-'} + comment.id">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h4>发起人</h4>
<div class="media">
<div class="media-left">
<a href="#"> <img class="media-object img-rounded"
th:src="${question.user.avatarUrl}">
</a>
</div>
<div class="media-body">
<h5 class="media-heading">
<span th:text="${question.user.name}"></span>
</h5>
</div>
</div>
</div>
<!-- dog.png -->
<hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h4>图片</h4>
<img src="/images/dog.png" class="img-thumbnail question-img">
</div>
<!-- 相关问题 -->
<hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h4>相关问题</h4>
<ul class="question-related">
<li th:each="related : ${relatedQuestions}"><a
th:href="@{'/question/'+${related.id}}"
th:text="${related.title}"></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>