Jhipster4, Angular2: How include static image in html

Question

Could you help me with including static image in html template.

I generated project using jhipster generator (chosen Angular 2) and now I'm trying to include static image in html-template of component (for example for NavbarComponent into navbar.component.html). I inserted tag image into navbar.component.html

<img src="url" />

My image is placed into webapp/content/images/staticimage.jpg (this folder containts logo-hipster.png also). What do I have to place instead of url in img tag to see my image?

P.S. the inital structure of generated project wasn't changed.

Answer 1

This issue was related to version of generator-jhispter (the version was 4.0.8 for my case), where webpack config wasn't set properly.

After upgrade of generator-jhipster (it's 4.3.0) the issue has gone off. As I understood this issue also might will be fixed if you change in webpack.common.js next rule

{
   test: /\.html$/,
   loader: 'raw-loader',
   exclude: ['./src/main/webapp/index.html']
},

New version of generated project brought me the next:

{
  test: /\.html$/,
  loader: 'html-loader',
  options: {
       minimize: true,
       caseSensitive: true,
       removeAttributeQuotes:false,
       minifyJS:false,
       minifyCSS:false
   },
   exclude: ['./src/main/webapp/index.html']
},

And also you have to check out there is 'html-loader' in our devDependencies of package.json.

And now tag <img src="../../../content/images/staticimage.jpg"> works properly.