Wie füge ich mit Thymeleaf ein Bild zu einer HTML-Seite hinzu?

Der

php-Editor Xigua stellt Ihnen in diesem Artikel vor, wie Sie mit Thymeleaf Bilder zu HTML-Seiten hinzufügen. Thymeleaf ist eine beliebte serverseitige Java-Template-Engine, die uns die Verwendung dynamischer Daten in HTML-Seiten ermöglicht. Das Hinzufügen von Bildern ist ein häufiges Bedürfnis im Webdesign und Thymeleaf bietet einfache, aber leistungsstarke Funktionen, um dieses Ziel zu erreichen. Im folgenden Inhalt erfahren Sie, wie Sie Thymeleaf-Tags und -Ausdrücke zum Referenzieren und Anzeigen von Bildern verwenden. Unabhängig davon, ob Sie Anfänger oder erfahrener Entwickler sind, bietet Ihnen dieser Artikel hilfreiche Anleitungen zum einfachen Hinzufügen von Bildern zu Ihren HTML-Seiten.

Frageninhalt

Mein Problem ist, dass mein Thymeleaf-Block kein Bild und kein Verknüpfungssymbol auf der HTML-Seite anzeigt

Ich habe versucht, den Dateipfad zu verwenden:

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

Und habe es auch mit der Rest-API versucht:

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

Mit Controller:

@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")));
    }
}

Und ich bekomme immer alt statt des Bildes...

Workaround

Problem 1: Die Datei richtig lesen

Wenn Sie die Standardkonfiguration verwenden, geben Sie src/main/resources 的任何内容都会复制到类路径中。因此，您不应在代码中引用 src/main/resources stattdessen einen Verweis auf den Klassenpfad selbst ein.

Wenn Sie es lokal ausführen, funktioniert es möglicherweise immer noch, aber sobald Sie die JAR-Datei an einem anderen Ort ausführen, stürzt es vollständig ab.

Idealerweise sollten Sie Ihren Controller also wie folgt umschreiben:

// 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));

Da das Abrufen von Ressourcen aus Dateien eine häufige Aufgabe ist, müssen Sie die Bytes nicht wirklich lesen. Sie können filesystemresource 代替 bytearrayresource:

verwenden

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

Sie können diese Zeit sogar verkürzen, da das Abrufen von Ressourcen aus dem Klassenpfad so häufig vorkommt, dass es eine classpathresource Klasse gibt:

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

Das ist noch nicht alles, normalerweise müssen Sie Webressourcen aus dem Klassenpfad bereitstellen, daher wird classpath:static/ 文件夹或 classpath:public/ 文件夹中的所有内容都已经在网络。所以通常情况下，您的图像已经可以在 http://localhost:8080/logo.png im Spring Boot verwendet, ohne dass Ihre Controller-Methoden erforderlich sind.

Normalerweise können Sie diese Controller-Methode also vollständig entfernen.

Frage 2: Akten richtig zitieren

Das bringt uns zur zweiten Frage. Derzeit verwenden Sie @{/api/v1/logo} 或 @{src/main/resources/static/logo.png}, um auf Ihre Bilder zu verweisen. Thymeleaf wird @{path/to/file} 解释为上下文相关 url，因此它唯一做的就是在上下文路径前面添加上下文路径（如果有的话）并期望该文件在 http://localhost:[serverport ]/[contextpath]/path/to/file.

Aber wie wir bereits festgestellt haben, sollte Ihr Bild auf http://localhost:8080/logo.png 上找到，因此，您应该使用 @{/logo.png}:

verfügbar sein

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

Wenn das nicht funktioniert, dann:

• Möglicherweise haben Sie Ihre Build-Tools falsch konfiguriert und nicht src/main/resources in Ihrem Klassenpfad enthalten.
• Möglicherweise haben Sie Spring Boot so konfiguriert, dass innerhalb von classpath:static/ 或 classpath:public/ nicht automatisch etwas bereitgestellt wird.

Das obige ist der detaillierte Inhalt vonWie füge ich mit Thymeleaf ein Bild zu einer HTML-Seite hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!