使用 Java 以编程方式在 Vaadin 14 中通过 CSS 指定背景图像

Question

在 Vaadin 14 中，我们可以在 Java 代码中以编程方式设置一些 CSS 值。

我们可以调用 getElement, then getStyle，并设置 CSS 属性的名称和一个值。

比如这里我们设置背景色为绿色

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

我们如何为 CSS 属性这样的 background-image 执行此操作，它接受名为 url 的 CSS 函数的参数？

硬编码 CSS 路径不起作用。

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

➥ 在Vaadin Flow中，我们如何使用Java得到CSS来找到像"cat.jpg"这样的图像？

此外，该图像文件的相对路径或绝对路径应该是什么？我知道在 Vaadin 网络应用程序中静态图像通常位于 src/main/resources 文件夹中。

Answer 1

如果是 "Plain Java Servlet"（非 Spring, non-CDI）Vaadin 项目，该文件应位于 /src/main/webapp

下

在 Spring 的情况下：/src/main/resources/META-INF/resources/img

摘自此处的官方文档：Resource Cheat Sheet

而且，正如@symlink 在评论中注意到的那样，您应该使用 url('filename') 语法来引用 css 中的图像：CSS background-image Property

例如，如果我在 /src/main/webapp/images 中有一个名为 cat.jpg 的文件，则将其设置为 getElement().getStyle().set("background-image","url('images/cat.jpg')");

这是另一个示例，src/main/webapp 中的图片文件 cat.jpg 没有嵌套在 images 文件夹中。这是一个 Vaadin 14.0.10 网络应用程序，使用 Start a new project with Vaadin 页面上的 Plain Java Servlet 技术堆栈选项。

以下是使用此图像作为背景的整个视图的源代码。

注意构造函数的第一行，我们在其中传递 "url('cat.jpg')" 作为参数。查看我们如何在文件名周围使用单引号来嵌入 Java 字符串而不进行转义。幸运的是，CSS 规范允许使用单引号 (') 或双引号 (") — 这对于 Vaadin 程序员在 Java 代码中嵌入 CSS 非常方便。

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 );
    }
}

以及此网络应用程序的屏幕截图。由于 VerticalLayout 的高度较短，图像被裁剪了。布局很短，因为它只包含一个按钮，其标签 Click me 可以在左边缘的蓝色文本中依稀看到。裁剪后的猫脸在页面上重复出现，这是 CSS 的默认设置。

使用 Java 以编程方式在 Vaadin 14 中通过 CSS 指定背景图像

Specify a background image via CSS in Vaadin 14 programmatically with Java

css

background-image

vaadin

vaadin-flow