SpecifyabackgroundimageviaCSSinVaadin14programmaticallywithJava

In Vaadin 14, we can set some CSS values programmatically in our Java code.

We can call getElement, then getStyle, and set the name of the CSS property along with a value.

For example, here we set the background color to green.

public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-color" , "Green" );

How do we do this for a CSS property like background-image that takes an argument of the CSS function named url?

Hard-coding the CSS path does not work.

public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-image" , "cat.jpg" );

? In Vaadin Flow, how to do we use Java to get CSS to find an image such as "cat.jpg"?

Furthermore, what should be the relative or absolute path to that image file be? I understand that the usual place for static images in Vaadin web app is in the src/main/resources folder.

如果是“普通Java Servlet”（非Spring，非CDI）Vaadin项目，则该文件应位于/src/main/webapp

如果是春季： /src/main/resources/META-INF/resources/img

摘自此处的官方文档：资源备忘单

并且，正如@symlink在注释中注意到的那样，您应该使用url('filename')语法在css中引用图像：CSS background-image属性

举例来说，如果我有一个文件名为cat.jpg内/src/main/webapp/images，那么这台就getElement().getStyle().set("background-image","url('images/cat.jpg')");

下面是另一个例子，与图片文件cat.jpg中src/main/webapp没有在嵌套images文件夹中。这是一个Vaadin 14.0.10 Web应用程序，使用“ 使用Vaadin启动新项目”页面Plain Java Servlet上的技术堆栈选项。

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-image" , "url('cat.jpg')" );

        Button button = new Button( "Click me" , event -> Notification.show( "Clicked!" ) );
        add( button );
    }
}