Как включить статическое изображение в HTML шаблон?

Question

Статические изображения не отображаются в шаблоне html.
Я использую JHipster 4.14.1 - Angular 5 - веб-пакет 3.10.0

Я поместил свое изображение в эту папку: /webapp/content/images
Я использую этот тег в HTML-шаблоне: <img scr="../../content/images/hello.png" alt="hello the world">

Моя конфигурация веб-пакета, кажется, в порядке по этой ссылке, описывающей ту же проблему.
Jhipster4, Angular2: Как включить статическое изображение в HTML

Мой файл "webpack.common.js" содержит:

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]']
   },

Сгенерированные имена файлов хэшированы.Итак, я открыл каждое изображение PNG, сгенерированное в папке target/www/content, и не нашел свое изображение.

Что не так?

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

В моей среде JHipster я нашел единственный способ добавить селектор в файл home.scss следующим образом:

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

Чтобы показать мое изображение в используемом мной HTML-шаблоне:
<div class="hello" ></div>

Если я не ссылаюсь на изображение в файле .scss, изображение PNG в webapp/content/image не копируется в папку target/www/content.

Есть ли другиекакие обходные пути проще реализовать для отображения статического изображения в HTML-шаблоне?

Answer 3

Поместите все свои изображения в папку ресурсов и попробуйте получить их оттуда так -

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