1

I am despritly trying to make make jhipster to serve static files, and it does but only to some extend, it seams that whatever the default configuration of jhipster app is, it is not able neither to retrieve any images througn the old fashioned src attribute. [edit]Sorry svg files load properly i just have written the path incorectly. I tried to configure my own resource handler 

@Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
            .addResourceHandler("/**")
            .addResourceLocations("/");
        super.addResourceHandlers(registry);
    }

But nothing seems to change, does anyone knows how to change the configuration so it would work properly.

[edit] I would be fine with this approuch but my problem is that i can`t load the image urls into backgound property dynamicly, This is what i am trying to achive

 <div [ngStyle]="{background: 'url('+service.productImageUri+') no-repeat center top'}"></div>

[edit]My problem is that if this style was written in sass file, then i would get a webpack MD5 hash generated link throgh webpack loader that IS working, but instead , because angular knows nothing about this mechanizm, i get a normal link that DOES NOT work.

Here is the file loader configuration of webpack

                test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', {
                        loader: 'image-webpack-loader',
                        query: {
                            gifsicle: {
                                interlaced: false
                            },
                            optipng: {
                                optimizationLevel: 7
                            }
                        }
                    }
                ]
            }

Does anyone know how to make webpack cooperate with angular 2 so i would get the prepared link instead of the standart when i load the image url dynamically, or at least do something that would prevent webpack from blocking request from reaching to spring boot resource handler.

Dmitrij Kostyushko
  • 636
  • 1
  • 8
  • 20
  • 1
    You must tell webpack to re-write image urls in your HTML files, this is done by html-loader, see how it is configured in webpack/webpack.common.js – Gaël Marziou Apr 15 '17 at 21:48

2 Answers2

2

This is done because that's how images can be optimized using CSS sprites - you can check this question for more information on IMG vs CSS background-image. Originally, it also worked better with the minifier we were using - please note that this was using Grunt, and this has been dropped a long time ago, so this is probably not true anymore.

I totally understand this isn't good for everyone, and indeed this can be discussed and improved on our GitHub issues, but at least that's the original reasons.

Community
  • 1
  • 1
Julien Dubois
  • 3,678
  • 1
  • 20
  • 22
  • Yeah, thanks, but i am more interested in ,making it stop, part of the question. Can you please tell me what mechanizm does jhipster uses to configure the resourse handlers. It`s obviously not the default spring boot configuration – Dmitrij Kostyushko Apr 15 '17 at 07:59
0

JHipster uses the webpack image resolver it analayses the tree structure of your app and bulds the bundle that would be send to the client.

To request the specific image you have to use the id that webpack have generated. Too get it you have to use the resolve function

So chnages i have to make are:

app.module.ts

declare function require(path:string):String;

In any other place where i have to insert the image

imageUrl = require( relativePathToTheImage);

Find out more about using webpack with angular 2 here

Dmitrij Kostyushko
  • 636
  • 1
  • 8
  • 20