Я только что обновил Grails 2.4 и использую плагин Asset-Pipeline1.8.7. Мне интересно, как получить доступ к изображениям из Javascript. Я использую API Google Maps Javascript V3 и вам нужно установить некоторые значки маркеров в Javascript. Есть ли способ создать некоторые Javascript-вары в GSP с помощью тега, а затем получить доступ к файлу в моем коде app.js? Если это невозможно, как сделать ссылку на скомпилированные изображения в активах?
Как я могу получить доступ к изображениям из Javascript, используя плагин Grails Asset-Pipeline?
Ответ 1
Вы можете определить глобально доступный объект, который содержит корневой путь к вашему ресурсу dir и использовать его для создания URL-адресов для ваших активов. Добавьте этот фрагмент к разделу макетов
<g:javascript>
window.grailsSupport = {
assetsRoot : '${ raw(asset.assetPath(src: '')) }'
};
</g:javascript>
Затем используйте его в другом месте:
<g:javascript>
var pathToMyImg = window.grailsSupport.assetsRoot + 'images/google_maps_marker.png';
</g:javascript>
Обновление 2015-08-06
Проверяя примечания к выпуску плагина для конвейера активов, я заметил, что неперевариваемые версии активов больше не хранятся в WAR- файл. Это означает, что мое предлагаемое решение ломается, когда приложение развертывается как WAR:
31 мая 2015 г. 2.2.3 Release - больше не хранит версии без дайджеста в военном файле, сокращая накладные расходы наполовину. Также удалена зависимость от входа в Commons. Более быстрый поток байтов.
Это означает, что вы должны явно определить все свои изображения заранее и больше не можете динамически строить путь в своих скриптах:
<g:javascript>
window.grailsSupport = {
myImage1 : '${assetPath(src: 'myImage1.jpg')}',
myImage2 : '${assetPath(src: 'myImage2.jpg')}'
};
</g:javascript>
Обновление 2016-05-25
Теперь можно настроить, если в встроенный war файл включены неперевариваемые версии активов, установив grails.assets.skipNonDigests
(по умолчанию - false
):
Обычно нет необходимости отключать "skipNonDigests". Tomcat автоматически по-прежнему будет обслуживать файлы неважным именем и копирует их с помощью storagePath с помощью карты псевдонима
manifest.properties
. Это просто сокращает объем хранения пополам. Однако, если вы пытаетесь сделать что-то вроде загрузки в cdn за пределами плагина cdn-asset-конвейер и через содержимое "target/assets". Это может быть полезно.
Обратите внимание, что вы все равно можете использовать предлагаемое решение для предварительного определения всех необходимых изображений, чтобы обойти проблемы кэширования в браузере (поскольку дайджест-версия актива имеет свой хэш-содержимое в имени файла).
Ответ 2
Да, вы можете, положив ${assetPath(src: 'img.png')}
в свой gsp
Ответ 3
Я не знаю, что идеальное решение в вашем случае, но решение может быть:
- Используйте относительные пути, такие как "../assets/use-control.png" в вашем js-коде.
- Добавьте img в свой дом и ссылайтесь на него со своего js-кода.
- Добавьте атрибут
data-imgpath="${asset.assetPath(src: 'use-control.png')}"
в соответствующий элемент в вашем доме и используйте эту ссылку.
Ответ 4
В качестве альтернативы вы можете использовать данные HTML5 - * Атрибут.
Я еще немного объяснил здесь:
загружать изображения из javascript