title: How do I dynamically render an image using LitRenderer and StreamResource in Vaadin Flow?
body: <p>I'm trying to create a <code>LitRenderer</code> for dynamically generated images that can be either gif/jpg/png files using a <code>StreamResource</code> in Vaadin. I also have the <code>byte[]</code> and so on but I figure using a <code>StreamResource</code> is the better way to do this. That being said I'm not sure how to display the <code>StreamResource</code> in the <code>LitRenderer</code> code. Below is my code:</p>
  <pre><code>private Renderer&lt;CustomImageData&gt; createImageRenderer() {
      return LitRenderer.&lt;CustomImageData&gt;of(&quot;&quot;&quot;
                              &lt;vaadin-horizontal-layout&gt;
                                  &lt;div&gt;&lt;img src=\&quot;${item.imageStreamResource}\&quot;/&gt;&lt;/div&gt;
                              &lt;/vaadin-horizontal-layout&gt;&quot;&quot;&quot;)
              .withProperty(&quot;imageStreamResource&quot;, CustomImageData::getThumbnailAsStreamResource);
  }
  </code></pre>
  <p>Clearer I can't just pass the <code>imageStreamResource</code> as a <code>src</code> as it's not a URL. It manages URL's but it's not a URL. My <code>CustomImageData</code> also has methods like <code>getByteData()</code>, <code>getMimeType()</code>, and so on but as mentioned above using a <code>StreamResource</code> seems like the better implementation.</p>
  <p>My question is how edit the code above so that it will display the image for <code>&lt;img&gt;</code>? The only examples I can find including such as <a href="https://vaadin.com/docs/latest/advanced/dynamic-content" rel="nofollow noreferrer">this one</a> and <a href="https://vaadin.com/docs/latest/components/grid/flow#using-lit-renderers" rel="nofollow noreferrer">this one</a> only seem to show images that are pre-defined, nothing dynamically generated.</p>
  <p>And in case this helps the calling code is:</p>
  <pre><code>grid.addColumn(createImageRenderer())
          .setKey(THUMBNAIL)
          .setHeader(THUMBNAIL);
  </code></pre>