Html 在Thymeleaf中，未显示图像_Html_Thymeleaf

Html 在Thymeleaf中，未显示图像

html

Html 在Thymeleaf中，未显示图像,html,thymeleaf,Html,Thymeleaf,请参见下面评论的图像部分 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>ORDER CONFIRMATION</title> </head> <body>

请参见下面评论的图像部分

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ORDER CONFIRMATION</title>
</head>
<body>
    <h3>www.HobbyShop.com</h3>

    <h3>Thank You for your purchase, <span th:utext="${purchase.getCustomer().getFirstName()}"></span></h3>

    <h3>Order summary</h3>
    <div>
        <table>
            <tr>
                <th width="20%">Product Image</th>
                <th width="50%">Product Detail</th>
                <th width="30%"></th>
            </tr>

            <tr th:each="orderItem : ${purchase.getOrderItems()}">

                <!-- Image section -->

                <td>
                     <p> <span th:utext="${orderItem.imageUrl}"></span>  </p>

                    <img  th:src="@{orderItem.imageUrl}" width="150px"/>
                </td>

                <!-- end of image section -->

                <td>

                    <p> <span th:utext="${ orderItem.name }"></span>  </p>
                    <p>Unit Price: <span th:utext="${ orderItem.unitPrice}"></span>  </p>
                    <p>Quantity: <span th:utext="${ orderItem.quantity}"></span>  </p>

                </td>

                <td>

                    <p>Subtotal: <span th:utext="${ orderItem.quantity * orderItem.unitPrice }"></span> </p>
                </td>
            </tr>

        </table>

    </div>


    <h5>Total Quantity: <span th:utext="${purchase.getOrder().getTotalQuantity()}"></span></h5>
    <h5>Total Price: <span th:utext="${purchase.getOrder().getTotalPrice()}"></span></h5>



    <h3>Order Details</h3>

    <h5>Your order will ship to:</h5>


    <h5 style="margin: 0" > <span th:utext="${purchase.getCustomer().getFirstName()}"></span>  <span th:utext="${purchase.getCustomer().getLastName()}" ></span> </h5>
    <h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getStreet()}" ></span> </h5>
    <h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getCity()}"></span>, <span th:utext="${purchase.getShippingAddress().getState()}"></span>, <span th:utext="${purchase.getShippingAddress().getZipCode()}" ></span> </h5>
    <h5 style="margin: 0"> <span th:utext="${purchase.getShippingAddress().getCountry()}" ></span> </h5>


    <h5>Your order Tracking Number: <span th:utext="${purchaseResponse.getOrderTrackingNumber()}"></span> </h5>





</body>
</html>


订单确认
www.HobbyShop.com
感谢您的购买，
订单摘要
产品形象
产品详情


单价：
数量：
小计：
总数量：
总价：
订单详情
您的订单将发送至：
,  
您的订单跟踪号：

在

中，我可以看到图像url，它是存储图像的AWS s3对象url

图像URL:

https://elasticbeanstalk-us-east-2-157391262832.s3.us-east-2.amazonaws.com/Books/Rafi12534@Gmail.com/ArtOfComputerProgramming.jpg

但是在

中找不到图像url。如果我将图像url硬编码如下：

它起作用了

对我来说，似乎在img标签中，我们没有得到img url。但是在th:utext图像url中显示了

${…}

表达式内部使用

@{…}

表达式的正确语法是：

 <img th:src="@{${orderItem.imageUrl}}" width="150px" />

但是，在这种情况下，根本没有理由使用标准URL语法。您可以直接使用变量

<img th:src="${orderItem.imageUrl}" width="150px" />

{orderItem.imageUrl}

失败的原因是，Thymeleaf将

orderItem.imageUrl

视为一个字符串，而不是一个变量（相当于

{'orderItem.imageUrl'}

将解析为

——您只需查看源代码并注意未解析变量即可看到这一点）