Как я могу получить доступ к изображениям из Javascript, используя плагин Grails Asset-Pipeline?

Я только что обновил Grails 2.4 и использую плагин Asset-Pipeline1.8.7. Мне интересно, как получить доступ к изображениям из Javascript. Я использую API Google Maps Javascript V3 и вам нужно установить некоторые значки маркеров в Javascript. Есть ли способ создать некоторые Javascript-вары в GSP с помощью тега, а затем получить доступ к файлу в моем коде app.js? Если это невозможно, как сделать ссылку на скомпилированные изображения в активах?

Ответы

Ответ 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')}" в соответствующий элемент в вашем доме и используйте эту ссылку.