Thymeleaf {'data:image/jpeg;base64'} 用于显示数据库图像的语法不起作用

Question

所以，我在 Springboot 编程和 rn 方面仍然是新手，我得到了一个任务，我需要将上传的图像存储到我的 phpmyadmin 数据库中，并使用 Thymeleaf 将其显示在 html 上以创建目录。到目前为止，我成功上传了图片并将其存储在我的数据库中，这是上传图片后我的本地数据库的样子：

phpmyadmin 数据库

但不幸的是，当尝试使用 Thymeleaf {'data:image/png;base64'} 语法显示它时仍然出错，图片仍然没有出现。这是我的 html 代码：

HTML Thymeleaf 显示目录语法

<h2 style="text-align: center" th:text="'Daftar Katalog ' + ${kategori}"></h2>
<br>
<div style="text-align: right; margin: 0px 125px">
    <a class="btn btn-success" href="/katalog/add" sec:authorize="hasAuthority('ROLE_Super Admin')" > + Tambah Katalog</a>
    <a class="btn btn-info" href="/">Beranda</a>
</div>
<div class="row" style="margin: 0px 100px">
  <div class="col-xl-4" th:each="katalog, iterationStatus : ${finalKatalog}">
    <br>
    <div class="card" >
        <img class="card-img-top" th:src="*{'data:image/jpeg;base64,' + {katalog.foto}}" alt="Card image cap">
        <div class="card-body" style="text-align: center">
          <h3 class="card-title" th:text="${katalog.vendor.nama}"></h3>
          <p class="card-text" th:text="Rp. + ' ' + ${katalog.harga}"></p>
        </div>
        <div class="card-body" style="text-align: center">
          <a class="btn btn-success" th:href="@{/katalog/detail/} + ${katalog.id}">Detail</a>
          <a class="btn btn-warning" th:href="@{/katalog/update/} + ${katalog.id}" sec:authorize="hasAuthority('ROLE_Super Admin')" >Update</a>
          <a class="btn btn-danger" th:href="@{/katalog/delete/} + ${katalog.id}" sec:authorize="hasAuthority('ROLE_Super Admin')">Delete</a>
        </div>
    </div>
  </div>
</div>

HTML Thymeleaf 表单添加目录语法

<div class="container">
    <br>
    <div class="alert alert-success" role="alert" th:text="${success}" th:if="${success}"></div>
    <div class="alert alert-danger" role="alert" th:text="${error}" th:if="${error}"></div>

    <div class="card m-4 p-4">
        <div class="card-body">
            <div class="justify-content-center">
                <h2 style="text-align: center" >Tambah Katalog Baru</h2>
                <form th:action="@{/katalog/add}" th:object="${katalog}" method="POST">
                    <input class="form-control" type="hidden" th:field="*{id}"/>

                    Nama Vendor : <br>
                    <select required name="vendor" class="form-control">
                        <option selected value="">--Pilih Vendor--</option>
                        <option th:each="vendor:${listVendor}"
                                th:value="${vendor.uuid}"
                                th:text="${vendor.nama}">
                        </option>
                    </select>
                    <br><br>

                    Kategori Vendor : <br>
                    <select required name="kategori" class="form-control">
                        <option selected value="">--Pilih Kategori--</option>
                        <option th:each="kategori:${listKategori}"
                                th:value="${kategori.kategori}"
                                th:text="${kategori.kategori}">
                        </option>
                    </select>
                    <br><br>

                    Instagram : <br>
                    <input required class="form-control" type="text" th:field="*{instagram}"/>
                    <br><br>

                    Lokasi : <br>
                    <input required class="form-control" type="text" th:field="*{lokasi}"/>
                    <br><br>

                    Harga : <br>
                    <input required class="form-control" type="number" th:field="*{harga}"/>
                    <br><br>

                    Foto : <br>
                    <div class="custom-file mb-4">
                        <input type="file" name="file" class="custom-file-input" id="customFile">
                        <label class="custom-file-label" for="customFile">Tambahkan Foto Katalog</label>
                    </div>

                    <br><br>
                    Deskripsi : <br>
                    <input required class="form-control" type="text" th:field="*{deskripsi}" style="min-height: 200px"/>
                    <br><br>

                    <a class="btn btn-outline-info" href="/">Beranda</a>
                    <button class="btn btn-success" type="submit" >Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

以下是其他支持代码：

目录控制器

@GetMapping("/katalog/add")
public String addKatalogFormPage(Model model) {
    var katalog = new KatalogModel();

    List<VendorModel> listVendor = vendorService.getListVendor();
    List<KategoriModel> listKategori = kategoriService.getListKategori();

    model.addAttribute("katalog", katalog);
    model.addAttribute("listVendor",listVendor);
    model.addAttribute("listKategori",listKategori);

    return "form-add-katalog";
}

@PostMapping(value = "/katalog/add")
public String addKatalogSubmitPage(@ModelAttribute KatalogModel katalog, BindingResult result,
                                   RedirectAttributes redirectAttrs) {
    katalogService.addKatalog(katalog);

    if (result.hasErrors()) {
        redirectAttrs.addFlashAttribute("error", "The error occurred.");
        return "redirect:/katalog/add";
    }

    redirectAttrs.addFlashAttribute("success",
            String.format("Katalog dengan Vendor %s berhasil ditambahkan ", katalog.getVendor().getNama()));

    return "redirect:/katalog/add";
}

目录模型（仅照片属性）

@NotNull
@Size(max = 50)
@Lob
@Column(columnDefinition = "MEDIUMBLOB")
private String foto;

目录服务（用于添加目录）

@Override
public void addKatalog(KatalogModel katalog) {
    katalog.setFoto(Base64.getEncoder().toString());
    katalogDb.save(katalog);
}

每个人都可以帮助我为什么这段代码不起作用吗？？谢谢