Comment ajouter une image à une page HTML en utilisant Thymeleaf ?

L'éditeur php Xigua vous présentera comment utiliser Thymeleaf pour ajouter des images aux pages HTML dans cet article. Thymeleaf est un moteur de modèles Java côté serveur populaire qui nous permet d'utiliser des données dynamiques dans les pages HTML. L'ajout d'images est un besoin courant dans la conception Web, et Thymeleaf fournit des fonctionnalités simples mais puissantes pour atteindre cet objectif. Dans le contenu suivant, nous apprendrons comment utiliser les balises et expressions Thymeleaf pour référencer et afficher des images. Que vous soyez débutant ou développeur expérimenté, cet article vous fournira des conseils utiles pour ajouter facilement des images à vos pages HTML.

Contenu de la question

Mon problème est que mon bloc thymeleaf n'affiche pas l'image et l'icône de raccourci sur la page html

J'ai essayé d'utiliser le chemin du fichier :

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

Et j'ai également essayé d'utiliser rest api :

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

Avec contrôleur :

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

Et j'obtiens toujours alt à la place de l'image...

Solution de contournement

Problème 1 : Lire correctement le fichier

Si vous utilisez la configuration par défaut, vous mettez src/main/resources 的任何内容都会复制到类路径中。因此，您不应在代码中引用 src/main/resources à la place, faites référence au chemin de classe lui-même.

Si vous l'exécutez localement, cela peut toujours fonctionner, mais dès que vous exécutez le fichier jar ailleurs, il plantera complètement.

Donc, idéalement, vous devriez réécrire votre contrôleur comme :

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

Étant donné que récupérer des ressources à partir de fichiers est une tâche courante, vous n'avez pas réellement besoin de lire les octets. Vous pouvez utiliser 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);

Vous pouvez même raccourcir ce temps, car la récupération des ressources du chemin de classe est si courante qu'il existe une classpathresource classe :

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

Ce n'est pas tout, vous devez généralement servir les ressources Web à partir du chemin de classe, donc au Spring Boot, classpath:static/ 文件夹或 classpath:public/ 文件夹中的所有内容都已经在网络。所以通常情况下，您的图像已经可以在 http://localhost:8080/logo.png est utilisé sans avoir besoin des méthodes de votre contrôleur.

Vous pouvez donc généralement supprimer complètement cette méthode de contrôleur.

Question 2 : Citer correctement les fichiers

Cela nous amène à la deuxième question. Actuellement, vous utilisez @{/api/v1/logo} 或 @{src/main/resources/static/logo.png} pour référencer vos images. Thymeleaf le fera @{path/to/file} 解释为上下文相关 url，因此它唯一做的就是在上下文路径前面添加上下文路径（如果有的话）并期望该文件在 http://localhost:[serverport ]/[contextpath]/path/to/file.

Mais comme nous l'avons établi précédemment, votre image devrait être disponible sur http://localhost:8080/logo.png 上找到，因此，您应该使用 @{/logo.png} :

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

Si cela ne fonctionne pas, alors :

• Vous avez peut-être mal configuré vos outils de build et n'avez pas inclus src/main/resources dans votre chemin de classe.
• Vous avez peut-être configuré Spring Boot pour ne rien servir automatiquement dans classpath:static/ 或 classpath:public/ .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!