Add support for showing images in templates

[marcushellberg]

As a developer, I want to show an image in my template-based view.

Actions taken

Enable file-loader in webpack

npm install --save-dev file-loader

webpack.config.js

module.exports = merge(flowDefaults, {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
});

Import image and use webpack generated filename as src

Template

import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import image from './release-cycle.jpg';

class TemplateView extends PolymerElement {

  static get properties() {
    return {
      imagePath: String
    };
  }

  constructor() {
    super();
    this.imagePath = image;
  }

  static get template() {
    return html`
    <img src$="[[imagePath]]">
  `;
  }
}

customElements.define("template-view", TemplateView);

Expected outcome

Image is displayed

Actual outcome

Image is not displayed. Vaadin's navigation interferes with the download request.

Environment

Vaadin 14 rc1, Chrome 75/mac

[denis-anisimov]

I'm not sure: is this a client side only issue ? I don't see in the description any server side involvement . The whole template is written using Polymer only.

So : does it work without Flow at all? If it works then is it so that this a web pack issue with paths: I see the image should be loaded from the path ./release-cycle.jpg and if pure Polymer works then it looks like there is some path resolution issue? If it doesn't work as a pure client side Polymer template then this is not a Flow issue.

[marcushellberg]

The template has a corresponding server-side class extending from PolymerTemplate and is loaded through Flow.

The issue is that everything under the frontend folder needs to be processed by webpack to be included in the build. So this issue would happen for instance if you made a designer template and wanted to add a logo to your design. But even after modifying the webpack config to load images, they can't be used as Vaadin's navigation interferes with the download.

[denis-anisimov]

Could you please provide a source code so that I can use it as is to reproduce without reverse engineering the code based on description ?

[marcushellberg]

template-image.zip

[denis-anisimov]

Thanks for the project.

You have to use "template" route to see the template with image.

What I see is:

• the image uses "681354c5ed4a8a956b619daed64011d6.png" as URI for src.
• but the file path is META-INF/VAADIN/681354c5ed4a8a956b619daed64011d6.png inside the jar file.

[joheriks]

Acceptance criteria

• If a file with the requested name exists in META-INF/VAADIN it should be served (similar logic may already have been added to solve another problem)
• Needs to have IT checking that image is actually loaded in browser

[dipatata]

Hello everybody! I think I saw it late, but I'm having the same exact issue. I don't understand what's the workaround. I have my image in frontend/img/img.png I want to use it inside my customized PolymerElement class.