Problems with TemplateRenderer and ComponentRenderer


I hope you can help me. I want to show an image if a row in grid is selected. I tried to do the same as described here:

I use Vaadin version 14.1.2.

I have one method getPosterPath with returns the filename, getPosterImage returns byte and getPosterImageForGrid returns an Vaadin-Image. When I put the file under images/poster the image is shown (see 1).

But I can´t use this. So I either have to use an abolute path (which does not work) or get the file as an image (see 2). When I try to get the image with method getPosterImageForGrid it does not show.

		"<div style='border: 1px solid gray; padding: 10px; width: 100%; box-sizing: border-box;'>"
			//1. this works:
			+ "<div><img style='height: 92px;' src='images/poster[[item.posterPath]
			//2. this does not work:
			+ "<div><img style='height: 92px;' src='[[item.posterImageForGrid]
			+ "<div>[[item.plot]
		+ "</div>")
			.withProperty("plot", MovieJoined::getPlot)
			.withProperty("posterPath", MovieJoined::getPosterPath)
			.withProperty("posterImageForGrid", MovieJoined::getPosterImageForGrid)
					.withEventHandler("handleClick", movieJoined -> {


	public Image getPosterImageForGrid()
		StreamResource resource = new StreamResource(this.getTitle() +".jpg", () -> new ByteArrayInputStream(this.getPosterImage()));
		return new Image(resource, this.getTitle());

I also tried ComponentRenderer:

grid.setItemDetailsRenderer(new ComponentRenderer<>(movie -> {
			VerticalLayout vl = new VerticalLayout();
			vl.add(new Label("    "));
			return vl;

With ComponentRenderer the image is shown but overlaps the other rows which is not the case with TemplateRenderer. I could not fix that problem either.

It would be great if someone has an idea how I can solve this.