Label component with HTML not processing img src correctly?

Greetings:
I am creating a file browser application that lets users look at HTML reports. I am using Vaadin 7.1.7. The application has a tree on the left and a Panel on the right with a Label in it. The Label is constructed like this:

Label docView = new Label("", ContentMode.HTML);

I am displaying html files in the label when the user clicks on a file in the tree.

I am rewriting the urls in the HTML file to include URI Fragments pointing back to my application. I write the new file to a temp file and pass it to the docView label as a TextFileProperty like this:

HTMLRewriter.rewrite(contents, tempFile, protocol, server, uiName, port);
TextFileProperty prop = new TextFileProperty(tempFile);
docView.setPropertyDataSource(prop);

So far, so good, since the file displays on the right hand side.

The problem is handling <img src=“” constructs in the file. The temp file is not located where the original html file is, since I don’t want to pollute my reports directory with massaged files. However, I can access the img src file in its original location and put a copy wherever is necessary. My solution is to put the img file in the same (temp) directory as the rewritten html file and make the relative url just point locally like this:

<img src="./tf_default.png" style="border:5px solid black" width="500px"></img>

The problem is that the file does not display as expected. When I go to the temp directory, the img file is there next to the temp file containing my rewritten html file, and when I drag that rewritten html file into a browser, the img src is being used to display the image. The first attachment I have provided here (FileBrowsingRaw.PNG) is what the file looks like when browsed directly like this. The second attachment (FileBrowser.PNG) is what the file looks like in the application.

Note in the HTML example provided, I am making it relative, but I have also explicitly pointed to the file with file:/// and the exact path, with the same result.

Also, as a side note, the result shown is in Chrome. In Firefox the output is slightly different: The img src does not maintain the 500px size specified , but shrinks down to a 0-size area with the 5-pixel border.

In an attempt to narrow this issue down, I skipped my url rewriting step shown above, and just created the TextFileProperty from the contents directly (see line 2 of the snippet above)… This way the file is just the file that was used in the tree. That file’s img src still behaves the same way. Also, since I wasn’t chasing down temp files, I changed the img src portion of the original file to see if I could get it to work with file:/// references pointing explicitly to the file. This had the same results as well (browsed directly, it works, thru the Label, it doesn’t).

I also noticed that I am able to embed images in button descriptions like this:


tooButton.setDescription(
			    "<h2><img src=\"../VAADIN/themes/filebrowser/img/comment_yellow.gif\"/>"+
			    	    "A richtext tooltip</h2>"+
			    	    "<ul>"+
			    	    "  <li>Use rich formatting with XHTML</li>"+
			    	    "  <li>Include images from themes</li>"+
			    	    "  <li>etc.</li>"+
			    	    "</ul>");

I don’t have to put images in my theme’s area on-the-fly to do this with my html file browser, do I?
Any ideas?
13420.png
13421.png

After working with this further, perhaps the title of the thread should be:

“How do you make files available for img src components?”

I replaced the Label component with a BrowserFrame component and still see the same behavior.

This tells me I am missing something here. Can anyone help? I’m stuck.

So my latest efforts show that I can get an img src working in my HTML file viewer if the img src looks like this:

<img src="http://upload.wikimedia.org/wikipedia/commons/1/1d/Ankh_isis_nefertari.jpg"></img>

This renders very nicely. At this point I want to create a common directory in my application where I can just copy images, and rewrite my img src references to point to them, thus serving them as a static resource. As an experiment, I have an HTML file hardcoded with the following img src:

<img src="http://pkrouse-e6410:8080/FileBrowser/common/arrow_right.png">

After reading the post
https://vaadin.com/forum#!/thread/330807
, I realize I need to create an url mapping in my web.xml. To that end, I replaced the default /* mapping with mappings for /common/* and /VAADIN/*. The full web.xml now looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>FileBrowser</display-name>
    <context-param>
        <description>Vaadin production mode</description>
        <param-name>productionMode</param-name>
        <param-value>false</param-value>
    </context-param>
    <servlet>
        <servlet-name>Filebrowser Application</servlet-name>
        <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
        <init-param>
            <description>Vaadin UI class to use</description>
            <param-name>UI</param-name>
            <param-value>com.example.filebrowser.FilebrowserUI</param-value>
        </init-param>
        <init-param>
            <description>
            Legacy mode to return the value of the property as a string from AbstractProperty.toString()
            </description>
            <param-name>legacyPropertyToString</param-name>
            <param-value>false</param-value>
        </init-param>
        
    </servlet>
    <servlet-mapping><!-- This used to be /*, but that swallowed everything -->
        <servlet-name>Filebrowser Application</servlet-name>
        [color=#FF0000]
<url-pattern>/VAADIN/*</url-pattern>
[/color]
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Filebrowser Application</servlet-name>
        [color=#FF0000]
<url-pattern>/common/*</url-pattern>
[/color]
    </servlet-mapping>
    <listener>
        <listener-class>com.example.tomcat.listener.StartupListener</listener-class>
    </listener>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>
</web-app>

In Eclipse, I created a common folder under WebContent and placed arrow_right.png in the new folder. I exported the WAR, put it in my tomcat 6 webapps folder and watched it deploy (I wiped the old FileBrowser folder just to be sure).

At that point, I saw the new common folder with arrow_right.png in it under webapps/FileBrowse. When I placed the proper img src in my test html, it didn’t show up. I also put the file’s url directly in my browser like this:
http://pkrouse-e6410:8080/FileBrowser/common/arrow_right.png
and it didn’t display that way either.

Attached is the display of the png file in my deployed application, the appearance of the same file in my project, and what my html file looks like in the browser, with the working img src link to the nefertiti image, and the broken one pointing into my application. Also attched is the sample html file.

I think I am close to solving this, but any help or suggestions would be greatly appreciated.

13438.png
13439.png
13440.png
13441.html (461 Bytes)