Bagaimana untuk menambah imej ke halaman html menggunakan Thymeleaf?

editor php Xigua akan memperkenalkan anda cara menggunakan Thymeleaf untuk menambah imej pada halaman HTML dalam artikel ini. Thymeleaf ialah enjin templat Java sebelah pelayan yang popular yang membolehkan kami menggunakan data dinamik dalam halaman HTML. Menambah imej adalah keperluan biasa dalam reka bentuk web, dan Thymeleaf menyediakan ciri yang mudah tetapi berkuasa untuk mencapai matlamat ini. Dalam kandungan berikut, kita akan belajar cara menggunakan teg dan ungkapan Thymeleaf untuk merujuk dan memaparkan imej. Sama ada anda seorang pemula atau pembangun yang berpengalaman, artikel ini akan memberikan anda panduan berguna untuk menambahkan imej ke halaman HTML anda dengan mudah.

Kandungan soalan

Masalah saya ialah blok thymeleaf saya tidak menunjukkan imej dan ikon pintasan pada halaman html

Saya cuba menggunakan laluan fail:

<img class="logo" th:src="@{src/main/resources/static/logo.png}" alt="logo">

Dan juga cuba menggunakan api rehat:

<img class="logo" th:src="@{/api/v1/logo}" alt="logo">

Dengan pengawal:

@RestController
@RequestMapping("/api/v1/logo")
public class LogoController {

    @GetMapping(produces = MediaType.IMAGE_JPEG_VALUE)
    public Resource getLogo() throws IOException {
        return new ByteArrayResource(Files.toByteArray(new File("src/main/resources/static/logo.png")));
    }
}

Dan saya sentiasa mendapat alt dan bukannya imej...

Penyelesaian

Masalah 1: Membaca fail dengan betul

Jika anda menggunakan konfigurasi lalai, anda meletakkan src/main/resources 的任何内容都会复制到类路径中。因此，您不应在代码中引用 src/main/resources sebaliknya rujuk pada laluan kelas itu sendiri.

Jika anda menjalankannya secara setempat, ia mungkin masih berfungsi, tetapi sebaik sahaja anda menjalankan fail jar di tempat lain ia akan ranap sepenuhnya.

Sebaik-baiknya anda harus menulis semula pengawal anda sebagai:

// get location from classpath
uri location = getclass().getclassloader().getresource("static/logo.png").touri();
// get file
path file = paths.get(location);
// read bytes
return new bytearrayresource(files.readallbytes(file));

Memandangkan mendapatkan semula sumber daripada fail adalah tugas biasa, anda sebenarnya tidak perlu membaca bait. Anda boleh menggunakan filesystemresource 代替 bytearrayresource:

// get location from classpath
uri location = getclass().getclassloader().getresource("static/logo.png").touri();
// get file
path file = paths.get(location);
return new filesystemresource(file);

Anda juga boleh memendekkan masa ini, kerana mengambil sumber daripada laluan kelas adalah perkara biasa sehingga terdapat kelas classpathresource:

return new classpathresource("static/logo.png");

Bukan itu sahaja, biasanya anda perlu menyediakan sumber web daripada classpath, jadi dalam but spring, classpath:static/ 文件夹或 classpath:public/ 文件夹中的所有内容都已经在网络。所以通常情况下，您的图像已经可以在 http://localhost:8080/logo.png digunakan tanpa memerlukan kaedah pengawal anda.

Jadi biasanya anda boleh mengalih keluar kaedah pengawal itu sepenuhnya.

Soalan 2: Memetik fail dengan betul

Ini membawa kita kepada soalan kedua. Pada masa ini, anda menggunakan @{/api/v1/logo} 或 @{src/main/resources/static/logo.png} untuk merujuk imej anda. thymeleaf akan @{path/to/file} 解释为上下文相关 url，因此它唯一做的就是在上下文路径前面添加上下文路径（如果有的话）并期望该文件在 http://localhost:[serverport ]/[contextpath]/path/to/file.

Tetapi seperti yang kami tetapkan sebelum ini, imej anda sepatutnya tersedia di http://localhost:8080/logo.png 上找到，因此，您应该使用 @{/logo.png}:

<img class="logo" th:src="@{/logo.png}" alt="Logo">

Jika ini tidak berkesan, maka:

• Anda mungkin telah mengkonfigurasi alatan binaan anda dengan salah dan tidak disertakan src/main/resources dalam laluan kelas anda.
• Anda mungkin telah mengkonfigurasi but spring untuk tidak menyampaikan apa-apa secara automatik dalam classpath:static/ 或 classpath:public/ .

Atas ialah kandungan terperinci Bagaimana untuk menambah imej ke halaman html menggunakan Thymeleaf?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!