BrowserFrame insert image to html file

Support
#1

image
how can I insert an image to html.

#4

Hello @Damon.Wang,

If you want to get an image from your web resources, you need to place an image to

modules/web/web/VAADIN/my_image.png

and it will be available by “http://localhost:8080/app/VAADIN/my_image.png”

Also, you can extend theme and place image to the theme folder and it will be available by
“http://localhost:8080/app/VAADIN/themes/hover/my_image.png”
where “hover” is theme folder.

Another way is to use HtmlBox with template content (See documentation). There you can specify relative URL to your images (See sampler programmatically defined templateContents) or use Image component like this:

<htmlBox width="100%" height="100%">
    <templateContents>
    <![CDATA[
            <div location="image" style="padding: 10px;"></div> </td>
    ]]>
    </templateContents>
    <image id="image" width="100px" height="100px" scaleMode="CONTAIN">
        <theme path="images/cuba-logo.png"/>
    </image>
</htmlBox>

Also, using Image component you can get images from your file storage.

2 Likes
New Vaadin 8 drag and drop bug breaks Cuba 7.2 app
#6

Hi, Roman.
It works. Thanks