Search code examples
htmlamazon-web-servicesspring-bootamazon-s3thymeleaf

Images not showing up in Thymeleaf image src for S3 URL

I am passing a list of image URLs stored in S3 to my HTML page to display. However, the images are not showing up. Below is my HTML file. The p tag correctly displays the URLs.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Display S3 Images</title>
</head>
<body>
<div th:each=" url: ${imageURL}">
    <p th:text="${url}"></p>
    <img src="${url}" width="300" height="300">
</div>
</body>
</html>

P.S The images show up when I hard code each URL, but obviously I don't want that. Any help is appreciated.

Solution

  • You need to use th:src instead of src:

    <div th:each="url: ${imageURL}">
    <p th:text="${url}"></p>
    <img th:src="${url}" width="300" height="300">
</div>