How to add image to html page using Thymeleaf?

php editor Xigua will introduce you to how to use Thymeleaf to add images to HTML pages in this article. Thymeleaf is a popular server-side Java template engine that allows us to use dynamic data in HTML pages. Adding images is a common need in web design, and Thymeleaf provides simple yet powerful features to achieve this goal. In the following content, we will learn how to use Thymeleaf tags and expressions to reference and display images. Whether you are a beginner or an experienced developer, this article will provide you with helpful guidance to easily add images to your HTML pages.

Question content

My problem is that my thymeleaf block is not showing the image and shortcut icon on the html page

I tried using file path:

And also tried using rest api:

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

And I always get alt instead of the image...

Workaround

Problem 1: Reading the file correctly

If you use the default configuration, anything you put intosrc/main/resourceswill be copied to the classpath. Therefore, you should not referencesrc/main/resourcesin your code, but the classpath itself.

If you run it locally it may still work, but as soon as you run the jar file somewhere else it will completely crash.

So ideally you should rewrite your controller as:

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

Since retrieving a resource from a file is a common task, you don't actually have to read the bytes. You can usefilesystemresourceinstead ofbytearrayresource:

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

You can even shorten this, since retrieving resources from the classpath is so common that there is aclasspathresourceclass:

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

That's not all, usually you need to serve web resources from the classpath, so in spring boot,classpath:static/folder orclasspath:public/Everything in the folder is already on the network. So typically your image is already available athttp://localhost:8080/logo.pngwithout the need for your controller methods.

So usually you can remove the controller method completely.

Question 2: Correctly citing files

This brings us to the second question. Currently, you reference your images using@{/api/v1/logo}or@{src/main/resources/static/logo.png}. thymeleaf interprets@{path/to/file}as a context-sensitive url, so the only thing it does is prepend the context path (if there is one) and expect the file to be athttp ://localhost:[serverport]/[contextpath]/path/to/file.

But as we established earlier, your image should be available athttp://localhost:8080/logo.png, so you should use@{/logo. png}:

If this doesn't work, then:

• You may have configured your build tools incorrectly and not includedsrc/main/resourcesin your classpath.
• You may have configured spring boot to not automatically serve anything withinclasspath:static/orclasspath:public/.

The above is the detailed content of How to add image to html page using Thymeleaf?. For more information, please follow other related articles on the PHP Chinese website!