Question

你能帮我在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。生成项目的初始结构没有改变。

Answer 1

这个问题与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']
},

而且你必须看看有没有＆＃39; html-loader＆＃39;在我们的package.json的devDependencies中。

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

Jhipster4，Angular2：如何在html中包含静态图像

1 个答案: