FileResource give broken Image

I’m fairly new to Vaadin and I’m working on implementing a resource class. The class creates resources internal and external.

Here’s basically what I wrote.

VerticalLayout layout = new VeriticalLayout(); String fileLocation = "e:/home/application/media/logo.png" Resource res = new FileResource(new File(fileLocation)); Image image = new Image(null, res); layout.addComponent(image); When I view this layout in the web browser, the image is broken. If I choose a file location that is in the container as follows, the link is STILL broken.

VerticalLayout layout = new VeriticalLayout();
String basepath = VaadinService.getCurrent().getBaseDirectory().getAbsolutePath();
FileResource resource = new FileResource(new File(basepath + "/WEB-INF/images/logo.png"));
Image image = new Image(null, res);

Sadly, this last one is a rehash of what’s on
Vaadin’s website
which should of worked. In either case, if I look at the HTML code that is generated for the location of the image, I get something like this.


Also, I have used FilenameUtils.separatorsToSystem to set the fileLocation to platform specific with same results.

I’m not sure if any of these last pieces of extra information help, but what am I doing wrong? Why am I getting a broken image?

I even tried to use StreamResource.

StreamSource imagesource = new MyStreamSource();
StreamResource resource = new StreamResource(imagesource, "myimage.png");
Image image = new Image(null, resource);

I implemented MyStreamResource to read the image using input/output streams, but there is no image. For the sake of argument, I placed log messages in the implemented getStream which MyStreamSource overrides and no output messages were produced. Why isn’t getStream being called?!?

Lastly, I should mention that ThemeResource does work. All other methods of Resource, so far, have not.

Any insight to these issues is greatly appreciated.

FileResource with absolute path should work. Are you sure the file exists in the path?
I tried with

layout.addComponent(new Image(null, new FileResource(new File("c:\\users\\johannes\\Pictures\\mypic.jpg"))));

and it worked for me

That does not work for me at all. I literally tried what you have and just changed my path to where my image file was using escaped slashes as you’ve done.

Technically, that should work, but does not.

I don’t know if this matters, but Vaadin is within a Spring Boot context.

In addition, I tried the following to see if the resource really had the image:

Image image = new Image(null, new FileResource(new File("e:\\home\\myimage.png")))
FileResource imgFile = (FileResource) image.getSource();
DownloadStream ds = imgFile.getStream();
StringWriter writer = new StringWriter();
IOUtils.copy(ds.getStream(), writer);

This gave me a size. I removed the “length()” and I can see the header of the PNG followed by all the binary. So, I presume the Resource is good with the image. What I think is the problem is that Vaadin is not mapping the image to the generated URL for some reason.


Something about how this URL is generated and how it hooks to the actual image is not working under my framework I guess.

Anybody have any ideas what it could be?

Nevermind. I figured it out. The application framework I have as a filter on http requests to only allow requests from certain URLs. “/vaadinServer/APP” was not one of them. I added it to the list and now everything works. Sorry for leading everyone on a goose chase.