0

I have a view in my Vaadin Flow Application called HomeView. I am attempting to add an Image component called logo.png to this view to display it on the home page. The code for HomeView looks like so:

package ymca.tracker.application.views.home;

import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

@PageTitle("Home")
@Route(value = "home")
public class HomeView extends VerticalLayout {

    public HomeView() {
        setSpacing(false);

        add(new H2("Welcome!"));
        add(new Image("frontend/images/logo.png", ""));

        setSizeFull(); setJustifyContentMode(JustifyContentMode.CENTER);
    setDefaultHorizontalComponentAlignment(Alignment.CENTER);
    getStyle().set("text-align", "center");
    }
}

I have verified the file path is correct as well as the name and type of the file. I have tried adding alternate text but the image still does not display. Currently, an icon is emplaced instead of the actual image I want displayed. See below:

enter image description here

I've tried directly placing the file in the frontend folder as well, with no luck either. Not sure what the issue could be here as this seems pretty straightforward.

WeekendJedi
  • 67
  • 10
  • Does this answer your question? [Where should I place my Vaadin 10+ static files?](https://stackoverflow.com/questions/57553973/where-should-i-place-my-vaadin-10-static-files) – cfrick Mar 21 '22 at 07:41
  • @cfrick Looking over this post, I still don't really see a solid solution for my issue. I understand what the post was getting at, but regardless of where the image is placed in the frontend directory, it refuses to display. – WeekendJedi Mar 21 '22 at 12:54
  • You are using `frontend` in your `new Image(...)`. – cfrick Mar 21 '22 at 15:39
  • This is the official Resources cheat sheet: https://vaadin.com/docs/latest/flow/advanced/loading-resources/#resource-cheat-sheet. – Tarek Oraby Mar 22 '22 at 07:27
  • 2
    If you do `new Image("img/flower.jpg", "A flower")` then the file location should be `/src/main/resources/META-INF/resources/img/flower.jpg` in Spring Boot project, or `/src/main/webapp/img/flower.jpg` in plain Java projects. – Tarek Oraby Mar 22 '22 at 07:29

0 Answers0