FileResource give broken Image

General
1

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);
layout.addComponent(image);

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.

https://localhost/app/vaadinServlet/APP/connector/0/5/source/logo.png

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.

2

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

3

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);
System.out.println(writer.toString().length());

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.

[protocol]
+"://"+[currentUrl]
+"/APP/connector/"+[uiId]
+"/"+[cid]
+"/source/"+[filename]

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?

4

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.