Jhipster4，Angular2:如何在HTML中包含静态图片 [英] Jhipster4, Angular2: How include static image in html

问题描述

您能帮我在html模板中包含静态图片吗?

我使用jhipster生成器(选择Angular 2)生成了项目，现在我试图在组件的html模板中包含静态图像(例如，将 NavbarComponent 包含在 navbar.component中. html ).我将标签图片插入了navbar.component.html

<img src="url" />

我的图像放置在webapp/content/images/staticimage.jpg中(此文件夹也包含logo-hipster.png).要查看图像，我必须在img标签中放置什么而不是url?

P.S.生成项目的初始结构没有改变.

解决方案

此问题与generator-jhispter的版本(在我的情况下为4.0.8)有关，其中webpack配置设置不正确. >

在generator-jhipster(4.3.0)升级之后，该问题就消失了. 据我了解，如果您更改webpack.common.js的下一条规则，此问题也可能会得到解决

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

所生成项目的新版本为我带来了下一个:

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

另外，您还必须检查package.json的devDependencies中是否存在"html-loader".

现在标记<img src="../../../content/images/staticimage.jpg">正常工作.

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.

解决方案

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.

这篇关于Jhipster4，Angular2:如何在HTML中包含静态图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！