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:

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

And also tried using rest api:

<img class="logo lazy"  src="/static/imghwm/default1.png"  data-src="@{/api/v1/logo}"  th: alt="logo">

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 into src/main/resources will be copied to the classpath. Therefore, you should not reference src/main/resources in 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 use filesystemresource instead of 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);

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

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 or classpath:public/ Everything in the folder is already on the network. So typically your image is already available at http://localhost:8080/logo.png without 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 at http ://localhost:[serverport]/[contextpath]/path/to/file.

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

<img class="logo lazy"  src="/static/imghwm/default1.png"  data-src="@{/logo.png}"  th: alt="Logo">

If this doesn't work, then:

• You may have configured your build tools incorrectly and not included src/main/resources in your classpath.
• You may have configured spring boot to not automatically serve anything within classpath:static/ or classpath: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!