I am using Flow UI I need to insert an image

Support
#1

Hi,
I am using flow ui.
I use tag to put an image on the page.
I need to know in which path I can put the png file.
I have tried in “resources” but it does not find it.
Can you help me?
Thanks,
Mario

#2

Hi Mario,

According to Vaadin docs, static images should be placed under /src/main/resources/META-INF/resources folder if you build an executable JAR (and in dev mode).

So the following case works for me:

For example, if the image is located at src/main/resources/META-INF/resources/myimage.png, you can display it on a view as follows:

<image id="image" resource="myimage.png" height="100px" width="100px"/>
#3

Konstantin,

I’m having a similar issue in Jmix 2.0.2, where any image I place in the listed locations doesn’t show up, and I’m not sure why this is.

Project view:
image

XML:

    <layout>
        <image id="titleImage1" resource="images/acfgl-logo-white.png"/>
        <image id="titleImage2" resource="images/scale_display.jpg"/>
        <image id="titleImage3" resource="icons/icon.png"/>
        <image id="titleImage4" resource="icons/acfgl-logo-white.png"/>
        <image id="titleImage5" resource="images/icon.png"/>
        <image id="titleImage6" resource="acfgl-logo-white.png"/>
        <htmlObject text="Hello"/>
    </layout>

Result:
image

The only image that will appear is src/main/resources/META-INF/resources/icons/icon.png, which is there by default. I tried copying that image to a different location, and it doesn’t show.

Is the problem with copying the image from another location on my computer and pasting it into the folder in the Project view?

Thanks,
Adam

#4

Hello,

I have prepared a small project for you with different options for storing pictures.

By default, static content is served from /static , /public , /resources , or /META-INF/resources directories of the classpath (see details in the Spring Boot documentation).

If files are located in /static, /public, /resources, there is no need to specify static, public, resources in the image tag.

image

jmix-image-sample.zip (304.9 KB)

Regards,
Nikita

#5

Thank you for this. Unfortunately, I still can’t figure out what I’m doing wrong. I’m 100% sure I’m missing something silly on my part. The image is in META-INF/resources/images, and is being referred to directly by images/acfgl-logo-white.png, but it isn’t showing when I load the application in a web browser.

image

Just in case the image is corrupted or something, I’ve also copied the icon.png file from the icons directory to the images directory, and that one doesn’t show there either.

I just know I’m missing something, but I haven’t had this issue before.

Thanks,
Adam

#6

Is it a regular view opened after user login?
Or maybe a view with anonymous access?

#7

It is, indeed, an anonymous view.

#8

Solution provided. Assets were blocked by security on anonymous views. Added new security configuration file:

@Configuration
public class AppSecurityConfiguration {

    @Bean
    @Order(JmixSecurityFilterChainOrder.FLOWUI - 10)
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.securityMatcher("/images/**")
                .authorizeHttpRequests((authorize) -> authorize.requestMatchers("/images/**").permitAll());
        return http.build();
    }
}

Thank you,
Adam

1 Like