devsoap/ds-gradle-vaadin

Wrong image locations in vaadin-flow-bundle-*cache.html in frontend-esx folders

villelux opened this issue · 4 comments

villelux commented

Desktop (please complete the following information):

  • OS: Windows
  • JDK version: 8
  • Gradle version: 5.2.1
  • Vaadin Plugin version: 1.1.1

Describe the bug
Image locations of templates and styles are changed in vaadin-flow-bundle-*cache.html, e.g. background-image:url("../img/myImage.png") becomes background-image:url("img/myImage.png").

The image is shown only if it is put in frontend/templates/img as the image url was modified.

To Reproduce
Steps to reproduce the behavior:

  1. Use beverage-starter-flow-gradle and set production mode to true.
  2. Add under src/main/webapp/frontend a folder img, containing an image 'myImage.png'
  3. modify src/main/webapp/frontend/templates/reviews-list.html to use the image (background-image: "../img/myImage.png")
  4. run tomcat: gradle tomcatRun

Expected behavior
The website http://localhost:8080/beveragebuddy/ should show the image.
vaadin-flow-bundle-*cache.html should contain the correct url to the image.

Additional context
Tested it with the flow-maven-plugin and image locations in the cache file are not being changed.

I use several images in my templates and style files, which are under frontend/img. Some of them are used by both templates and styles, so putting them under frontend/templates/img or frontend/styles/img is not an option, as I do not want to have duplicates of the images.

johndevs commented

Right now only two root folders under src/main/webapp/frontend are supported; templates and styles.

Any reason why your templates cannot reference the images in the styles folder?

For example if you have an image in styles/img/logo.png you could reference it in a template template/my-template.html by using ../styles/img/logo.png.

villelux commented

It works as expected, if I add

bundle": {                
     "rewriteUrlsInTemplates": false
...

in builds for frontend-es6 and frontend-es5 in polymer.json

Could you add "rewriteUrlsInTemplates":false to polymer.json or add some way to add build output bundling options to the polymer build?

johndevs commented

According the the polymer 2 docs (https://polymer-library.polymer-project.org/2.0/docs/tools/polymer-json#builds):

rewriteUrlsInTemplates: Rewrite URLs in element attributes and style tags inside templates when inlining html.
Defaults to false for Polymer 2.x; for Polymer 1.x, or where the Polymer CLI can't identify the version you're using, rewriteUrlsInTemplates defaults to true.

I guess if you are using Polymer 1 elements in your project you would run into this.

Let's add "rewriteUrlsInTemplates": false by default.

villelux commented

thanks