Question

我正在尝试通过将带有百里香叶的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>

有什么建议吗？

Answer 1

结果证明，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);
}

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

您可以内联使用 Thymeleaf Javascript。

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

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

使用jquery和thymeleaf动态显示图像

3 个答案: