Hi,
I’ve just started with Vaadin 12 and at first look I was happy but… later on I realized that I can’t find any component for image.
I’ve tried to do something like this
Image img=new Image("/frontend/img/1.PNG","something");
layout1.add(img);
I think it shouldn’t be a problem for vaadin team to make such component as standard…but instead of simplify … it seems to be more complex.
So question is ? where I should place image ? how shall I load it at server side ?
I’m on Vaadin 12, and I do see an image component. com.vaadin.flow.component.html.Image:
Image i = new Image("/images/myimage.png", "Alternative image text");
layout.add(i);
Here are other ways of doing it:
Using Html:
Html img = new Html("<img src='/images/myimage.png'>");
layout.add(img);
Creating your own tag (Vaadin’s image is using a tag too):
package bc.ui.components;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.HasSize;
import com.vaadin.flow.component.Tag;
@Tag("img")
public class Image extends Component implements HasSize {
public Image() {
}
public Image(String src) {
setSrc(src);
}
public void setSrc(String src) {
getElement().setProperty("src", src);
}
}
Hi Pawel,
Try moving the img folder to the styles folder and update your reference. That should work.
There is also the possibility to create an image from a byte array instead of an actual image file in the frontend folder.
byte[] imageBytes = getImageFromDB();
StreamResource resource = new StreamResource("fakeImageName.jpg", () -> new ByteArrayInputStream(imageBytes));
Image image = new Image(resource, "alternative image text");
layout.add(image);
Thanks for replay.
I’ve just tried all simple methods but still no solution :-(.
Maybe IDE & JDK is bad ? Or Maybe I have to use diffrent source for maven project.
I downloaded from https://vaadin.com/start/latest Project Base.
IDE
Product Version: Apache NetBeans IDE 10.0 (Build incubator-netbeans-release-380-on-20181217)
Updates: NetBeans IDE is updated to version NetBeans 8.2 Patch 2
Java: 11.0.1; Java HotSpot™ 64-Bit Server VM 11.0.1+13-LTS
Runtime: Java™ SE Runtime Environment 11.0.1+13-LTS
System: Windows 10 version 10.0 running on amd64; Cp1250; plPL (nb)
package com.czest;
import com.vaadin.flow.component.Html;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
/**
* The main view contains a button and a click listener.
*/
@Route("")
public class MainView extends VerticalLayout {
public MainView() {
Button button = new Button("Click me",
event -> Notification.show(" Clicked!"));
add(button);
Image i = new Image("/images/1.PNG", "Alternative image text");
add(i);
Html img = new Html("<img src='/images/1.png'>");
add(img);
}
}
Seems to me that you have a different path to your image than the path that you give into the Image constructor. Can you try this:
Image i = new Image("frontend://styles/images/1.PNG", "Alternative image text");
add(i);
Kaspar,
Unfortunanelly it dosn’t work too, but right now I’m seeing in browser Styles folder as source but can’t make any reference to.
In your image src you should use the right path.
In your screenshot result.png or source.png or war.png, in your java you tried to show /images/1.PNG which is not in your webapp folder.
So inside your webapp folder you should create a folder “images” and a file “1.PNG” inside this folder.
I made some experiment with and without @Route
Results are weird. Without @route I have access to “images” folder and I can call out picture (no show main page) but with @Route folder “images” is not accessible.
The same thing is with and without PWA.
I think something is wrong with compability between vaadin libraries and netbeans IDE. I will try under eclipse later on.
You can run your project with mvn jetty:run (then you can’t have an error from IDE).
In your last example, you try to show war.png but you have war.PNG in your webapp folder.
Did you try this url when your server is running ?
http://localhost:8080/images/war.PNG and http://localhost:8080/images/war.PNG
and check the network error (404) when you try http://localhost:8080 ?
Perhaps it’s not working because of java 11 (never try a vaadin project in java 11)
There is still no webapp folder. Quoting Leif Åstrand in a blogpost about [static resources in Vaadin Flow]
(https://vaadin.com/blog/vaadin-10-and-static-resources):
such files should be put in src/main/webapp/frontend/ … and … Since the beginning of Maven, files from src/main/webapp/ have been packaged into the root of the .war file.
In my project, I have a logo stored in src/main/webapp/frontend/img/logo.png
And I show it successfully using this:
Image logo = new Image("frontend/img/logo.png", "logo");
Jean-Christophe,
It seems I can call out
http://localhost:8080/images/war.PNG (it works-> see attach)
but even if I put above link to Image (it doesn’t work 
)
Kaspar,
I tried to put picture everywhere without success.
Generally I tried on both Eclipse and Netbeans and with the same result (can’t see folder with pictures).
Thank you for great support.
The issue was with extension file. Extension file must be in lower capital letters.
war.PNG must be war.png, Right everything works perfectly
So I think, It is a small bug, I think vaadin library should accept both variant.
@Route("")
//@PWA(name = "Project Base for Vaadin Flow", shortName = "Project Base")
public class MainView extends VerticalLayout {
public MainView() {
Button button = new Button("Click me",
event -> Notification.show("Clicked!"));
add(button);
Image i = new Image("frontend/images/war.png", "Alternative image text");
add(i);
Html img = new Html("<img src='frontend/images/war.png'>");
add(img);
}
}
Hi Pawel,
That’s very strange. I tested with multiple images, and both .png and .PNG work.