Question

静态图像不会显示在html模板中我正在使用JHipster 4.14.1 - Angular 5 - webpack 3.10.0

我将图片放在此文件夹中：/webapp/content/images
我在html模板中使用此标记：<img scr="../../content/images/hello.png" alt="hello the world">

根据此链接描述同样的问题，我的webpack配置似乎没问题 Jhipster4, Angular2: How include static image in html

我的＆＃34; webpack.common.js＆＃34;文件包含：

test: /\.html$/,
       loader: 'html-loader',
       options: {
           minimize: true,
           caseSensitive: true,
           removeAttributeQuotes:false,
           minifyJS:false,
           minifyCSS:false
       },
       exclude: ['./src/main/webapp/index.html']
   },
   {
       test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
       loaders: ['file-loader?hash=sha512&digest=hex&name=content/[hash].[ext]']
   },

生成的文件名经过哈希处理。所以，我打开了文件夹target/www/content中生成的每个PNG图像，但我找不到我的图像。

出了什么问题？

Answer 1

您缺少图像路径中的content目录。要在Angular中包含图像：

<img src="../../content/images/hipster.png" alt="Hipster" />

请注意，要包含的../的数量取决于您相对于content文件夹的深度目录数

Webpack在编译TS和模板时对图像进行哈希处理，因此它将位于/target/www/content/中，但名称不同。 Webpack生成的输出：

<img _ngcontent-c1="" alt="Hipster" src="content/ca854e6d0785ba4b9d715049c0bdbcb3.png">

Answer 2

将所有图片放在assets文件夹中，然后尝试从那里获取 -

<img scr="assets/images/hello.png" alt="hello the world">

Answer 3

在我的JHipster环境中，我找到的唯一方法是在home.scss文件中添加一个选择器，如下所示：

.hello {
    height: 150px;
    background: url("../../content/images/hello.png") no-repeat center;
    background-size: contain;
}

要在我使用的HTML模板中显示我的图像：
<div class="hello" ></div>

如果我没有在.scss文件中引用该图像，则webapp/content/image中的PNG图像不会复制到target/www/content文件夹。

是否还有其他解决方法可以更简单地在html模板中显示静态图像？

如何在html模板中包含静态图像？

3 个答案: