image path in HTML Label

Hello,

I’m displaying the content of an HTML file in a Label, as follows:

Label myLabel = new Label("", ContentMode.HTML); myLabel.setPropertyDataSource(new com.vaadin.data.util.TextFileProperty(<myHTMLFile>)); This is working fine, but the problem I’m having is that the images in the HTML file are not displayed.

If I use an image from any site in the internet with:

<img src="http://someURL/someImage.jpg"></img> that works fine. But when I try to use an image from my PC, it just seems impossible. I have also tried with the absolute path to make sure it is not due to some confussion with the relative paths, and it doesn’t work either. And I’m sure the absolute path is correct, because when I load the HTML file in a browser the image is shown.

Is there any way around this? Am I doing something wrong?

Thanks in advance.

where did you put the image?

you should put the image file under Web Content folder CMIIW

Hi,

Where is that folder supposed to be located? Or do I need to create it myself?
I was placing the image in the same place as the HTML file, which is directly in WEB-INF.

I’m absolutely new to vaadin, and quite new to web development in general, so I’m sorry because I’m probably confused with basic stuff.
I’m running the project directly from Netbeans, with Tomcat, and in fact, I’m having some trouble understanding how Netbeans is managing the project structure, because it seems that it is not using a web.xml file (or at least I have not been able to identify it) to run the project while developing. When I run it from the IDE, the application executes from

(my project folder)/target/(package)/

And I’m placing the HTML file and the image in the WEB-INF folder that exists there, which is not the same WEB-INF that I see in my project in Netbeans under Web Pages in the projects explorer frame.

Again, sorry if I’m asking very basic things. And thanks for the help.

I don’t know about netbeans as I don’t use it. But with eclipse, I usually put the file in VAADIN/themes//
It should be in your “Web Pages” from netbeans project explorer (only guessing)

Hello,

I see two relevant theme directories. One in the target directory I mentioned above:

(my project folder)/target/(package)/VAADIN/themes/mytheme/ And another one in the path with the source files:

(my project folder)/src/main/webapp/VAADIN/thmes/mytheme/ (This second one is the one I see in my project tree in Netbeans)
It does not work with either one of them.

I have tried with:

<img src="image.jpg"></img>

and with

<img src="../VAADIN/themes/mytheme/image.jpg"></img>

and with

<img src="../../../src/main/webapp/VAADIN/themes/mytheme/image.jpg"></img> Notice that the HTML file is in

(my project folder)/target/(package)/WEB-INF/

I placed it there because the reference directory from which I need to create the path to the HTML file in order for it to work when running the application from Netbeans is the
target
directory. I get this with

VaadinService.getCurrent().getBaseDirectory().getAbsolutePath()

Hello, sorry for late respond. Had you solve your problem?
I just setup my own netbeans and tried your code. As I said, put any files in VAADIN folder and/or its subfolder as it’s the only one that accessible from browser.

So, my project explorer looks like this:

and the code (simple snippet) is:

package com.mycompany.vaadintest;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.shared.ui.label.ContentMode;

/**
 *
 */
@Theme("mytheme")
@Widgetset("com.mycompany.vaadintest.MyAppWidgetset")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        Label myLabel = new Label("<img src=\"./VAADIN/html/grid_export.png\" />", ContentMode.HTML);
        layout.addComponent(myLabel);

    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

Hope it helps

Hi William,

First of all, thank you for the detailed response.
Yes, that works just fine, but that is not exactly the problem I’m having. In your example, you’re putting the tag directly in the label text, but the problem occurs when you load an existing HTML file as the content of the label. As I mentioned in my first post, what I am doing is:

Label myLabel = new Label("", ContentMode.HTML); myLabel.setPropertyDataSource(TextFileProperty(webPage.html)); And it is inside the webPage.html file where I have the image tag

<img src="image.jpg" /> This is what does not work. The rest of the HTML content is displayed just fine, but not the image. No matter what path you use, it just seems to simply not work.

P.S. - I can’t see the image you posted of your project explorer. Not sure why.

Hi,

With html file, the same rule is applied.

project explorer:

java class:

package com.mycompany.vaadintest;

import java.io.*;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.data.util.TextFileProperty;

/**
 *
 */
@Theme("mytheme")
@Widgetset("com.mycompany.vaadintest.MyAppWidgetset")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        //Label myLabel = new Label("<img src=\"./VAADIN/html/grid_export.png\" />", ContentMode.HTML);
        Label myLabel = new Label("", ContentMode.HTML);
        myLabel.setPropertyDataSource(new TextFileProperty(new File("/home/william/workspace/javaEE/vaadintest/target/vaadintest-1.0-SNAPSHOT/VAADIN/html/content.html")));
        
        layout.addComponent(myLabel);

        
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

html file:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head></head>
<body>
<img src="./VAADIN/html/grid_export.png" />
</body>
</html>

Ah! Ok! The mistake I was making is that I was writing the src path in the img tag relative to the location of the html file, and not relative to my project folder. So, if my html file and the image were both located, lets say, in VAADIN/html, I was using

<img src="./image.jpg" /> (relative to html file)

instead of

<img src="./VAADIN/html/image.jpg" /> (relative to project folder)

The former seemed intuitively correct, as I am referencing the image from the html file, but it’s wrong.
For me, it would make sense that Vaadin took care of that internally, I would expect to be able to display a “working” html file as-is, without having to adapt it to the Vaadin code. But that’s not how it goes :frowning:

In any case, thanks a lot for your help William, it’s working fine now.