使用 jquery 和 thymeleaf 动态显示图像答案

【问题标题】：Display images dynamically using jquery and thymeleaf使用 jquery 和 thymeleaf 动态显示图像
【发布时间】：2019-09-23 15:13:12
【问题描述】：

我正在尝试通过在 Spring Boot 中使用带有 thymeleaf 作为视图引擎的 jquery append 函数来动态显示图像

这是我尝试将图像附加到 div ('.show-image') 的方式：

success: function (data) {
    var image_url = "images.png";
    var images_div = "<img th:src=\"@{/image/"+image_url+"}\" height=\"360px\" width=\"400px\">";
    $('.show-image').append(images_div);
}

但是，它只显示空图像（没有 404 错误）

我尝试了其他随机在线图片和作品：

success: function (data) {
    var images_div = "<img src=\"https://onlinejpgtools.com/someimage/random-grid.jpg\" height=\"360px\" width=\"400px\">";
    $('.show-image').append(images_div);
}

当我静态显示图像时也可以（我认为没有路径问题）：

<div class="show-image">
    <img th:src="@{/image/images.png}"  height="360px" width="400px">
</div>

有什么建议吗？

【问题讨论】：

标签： java jquery spring-boot thymeleaf

【解决方案1】：

原来 thymeleaf 是一种服务器端技术，它不会渲染任何新图像。

我认为我的设计是错误的，我只需要像这样不使用 thymeleaf 来渲染图像：

success: function (data) {
    var image_url = "images.png";
    var images_div = "<img src=\""+image_url+ "\" height=\"360px\" width=\"400px\">";
    $('.show-image').append(images_div);
}

【讨论】：

【解决方案2】：

假设您在 public/images 下有一张图片。您可以使用此逻辑来动态设置图像：

 var myTextNode = $("#base").clone();
 myTextNode.text(msg) ;
 var image_url = "../images/av2.png";

 var images_div = "<img src=\"" +image_url+ "\">";
 myTextNode.append(images_div);

【讨论】：

【解决方案3】：

您可以使用 Thymeleaf Javascript 内联。

<script type="text/javascript" th:inline="javascript">
    $(document).ready(function () {
         var myImage= [[@{/image/images.png}]];
    });
</script>

现在您可以在脚本中使用这个 myImage javascript 变量了。

【讨论】：