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

Question

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

我们可以调用getElement ，然后 getStyle ，并设置 CSS 属性的名称和值。

例如，这里我们将背景颜色设置为绿色。

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

我们如何对像 background-image 这样的 CSS 属性执行此操作它接受名为 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 Web 应用程序中静态图像的通常位置位于 src/main/resources 文件夹中。

Answer 1

如果是“Plain Java Servlet”(非 Spring 、非 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')");

---

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

下面是使用该图像作为背景的整个 View 的源代码。

请注意构造函数的第一行，我们在其中传递 "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 的默认设置。