CODEWITHSUNDEEP
mysqlspring-bootthymeleaf
Denees
Denees

Reputation: 9198

Thymeleaf & Spring images generation from DB - will run into a strange behaviour

I am working on a project & I am using Thymeleaf with Spring to create web pages, but I can not seem to get images generation working properly.

I have them in my database, so they are generated fine (to the "generated" - folder).

enter image description here

So by accessing the Projects page the images should be there - but they are not showed on Frontend until I am not switching the Intellij and the go back to the Browser and click refresh again. I have never seen such strange behaviour. Maybe I am missing something in Thymeleaf? Cause I am using it for the first time.

FILE_UPLOAD_ROOT - is read from application.properties and it is src/main/resources/generated/

Then my controller is passing a list of projects to this method:

/**
 * Each entity that will extend {@link MediaModel} can use this method as a helper. In other words,
 * we should have these three fields added to the table that we're going to use:
 * pic(LONGBLOB), pic_name(VARCHAR), pic_type(VARCHAR)
 *
 * @param itemsList - database results for that we are going to generate images
 */
 public static void generateImages(Iterable<? extends MediaModel> itemsList) {

    itemsList.forEach(item -> {
        try {
            if (item.getPicName() == null) {
                return;
            } else {
                Files.write(Paths.get(FILE_UPLOAD_ROOT + item.getPicName() + "." + item.getPicType()), item.getPic());
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    });
}

in Thymeleaf I have: I am not really sure why, but the pictures are not taken directly from generated folder, I should specify only the root, anyway Thymeleaf will not be capable to show them at all.

<img th:src="@{/{picName}.{picType}(picName=${project.picName},picType=${project.picType})}"/>

MySQL schema that is holding the projects images

create table projects
(
    id          bigint       not null
        primary key,
    created_at  datetime(6)  not null,
    updated_at  datetime(6)  not null,
    pic         longblob     null,
    pic_name    varchar(255) null,
    pic_type    varchar(255) null,
    category_id bigint       not null,
    constraint FKmagkis2tpqxxx8hq100rjo92v
        foreign key (category_id) references projects_categories (id)
            on delete cascade
);

enter image description here

And when I try to access the page there is this, until I will not switch back to Intellij:

enter image description here

P.S. Yes I tried to deploy it to a remote server, cannot see them at all, but I took a look into the target folder and the images are there.

Upvotes: 0

Views: 80

Answers (1)

Defaulter
Defaulter

Reputation: 368

Why you want to store images from database to a folder inside your zipped war or jar ? It is not desirable

Either store images out-of packaged deployable on server and use it from there.

OR

Simply use image tag as below and render images on fly

<img alt="img"  th:src="@{'data:image/jpeg;base64,'+${Base64EncodedImage}}" />

P.S. - working in IDE is different then using application on server. Your approach will work in IDE but not on server

Upvotes: 1

Related Questions