Как включить статическое изображение в шаблон html?
Статические изображения не отображаются в шаблоне 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">
Моя конфигурация веб-пакета, похоже, в порядке по этой ссылке, которая описывает ту же проблему. 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, и не нахожу свое изображение.
Что не так ?
Примерно так: src = "assets / images / img.png"
Ответы 3
Поместите все свои изображения в папку с ресурсами и попробуйте получить оттуда вот так -
<img scr = "assets/images/hello.png" alt = "hello the world">
Не работает, потому что в среде JHispter нет каталога "assets". Параметр «assets» в файле «.angular-cli.json» - [«content», «i18n», «favicon.ico»].
В среде JHipster каталог «content» используется для хранения статических ресурсов. Это не конфигурация по умолчанию. Нет необходимости создавать другой каталог.
В пути к образу отсутствует каталог 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">
Ты прав. Я забыл добавить «контент» в путь к моему примеру (извините), но я думаю, что проблема в другом (webpack?). Я не нахожу свое изображение в целевом пути, даже если имя файла изменилось. Я открывал каждое изображение PNG, созданное в целевой папке, с помощью средства просмотра изображений, и я не вижу свое изображение ...
Вы пробовали добавить в путь content? Пример, который я привел, работает при добавлении в home.component.html. Вам также необходимо запустить webpack, если вы еще этого не сделали.
Да, я пытаюсь, но не получается. Когда я использую команду yarn start, я вижу в консоли журнала yarn run webpack:dev. Также есть список хешированных файлов at-loader и никаких сообщений об ошибках.
В моей среде 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?
Добавьте свои статические файлы в каталог src / assets. Затем вы можете получить доступ к статическим файлам