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 的任何內(nèi)容都會復(fù)制到類路徑中。因此，您不應(yīng)在代碼中引用 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/ 文件夾中的所有內(nèi)容都已經(jīng)在網(wǎng)絡(luò)。所以通常情況下，您的圖像已經(jīng)可以在 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} 解釋為上下文相關(guān) 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 上找到，因此，您應(yīng)該使用 @{/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!