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 :

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

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 mettezsrc/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 utiliserfilesystemresource代替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 uneclasspathresourceclasse :

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.pngest 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 surhttp://localhost:8080/logo.png上找到，因此，您应该使用@{/logo.png}:

Si cela ne fonctionne pas, alors :

• Vous avez peut-être mal configuré vos outils de build et n'avez pas inclussrc/main/resourcesdans votre chemin de classe.
• Vous avez peut-être configuré Spring Boot pour ne rien servir automatiquement dansclasspath: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!