使用jQuery和Thymeleaf动态显示图像

Question

我试图通过使用thymeleaf的jQuery附录功能作为春季启动中的视图引擎

动态显示图像

这是我尝试将图像附加到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>

有什么建议吗？

Answer 1

事实证明，胸腺是一种服务器端技术，它不会呈现任何新图像。

我认为我的设计错了，我只需要在不使用胸腺的情况下渲染图像：

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

Answer 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);

Answer 3

您可以使用胸腺javascript。

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

现在您可以在脚本中使用此MyImage JavaScript变量。