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

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


javascript grails asset-pipeline
person Scott Griz    schedule 04.06.2014    source источник
comment
Вы использовали taglib плагина ресурсов в этих javascripts? Или что-то вроде ${resource(dir:"", file:"")}?   -  person wwarlock    schedule 09.06.2014
comment
Я использовал плагин Resources, но не могу найти способ получить доступ к расположениям изображений в файле app.js? С Grails 2.4 я использую Asset-Pipeline Manager, но с той же проблемой. Я видел пример, когда они объявили JS Var в GSP с помощью тега g:javascript, но мой app.js по-прежнему не мог ссылаться на эту переменную.   -  person Scott Griz    schedule 10.06.2014
comment
С taglib плагина ресурсов и методом ресурса (который является собственным методом Grails, а не из плагина) ваш корень начинается с WEB-APPS. С плагином taglib и методом assetsPath для конвейера ресурсов корень начинается с grails-app/assets. Посмотрите на мои примеры ниже. Файл находится в папке ./grails-app/assets/stylesheets/style.css И я использую его в коде: assetPath(src: "stylesheets/style.css") или в качестве тэга в представлении: <asset:stylesheet src="style.css"/> То же самое с ресурсом   -  person wwarlock    schedule 10.06.2014

Ответы (4)


arrow_upward
20
arrow_downward

Вы можете определить глобально доступный объект, который содержит корневой путь к каталогу ваших ресурсов, и использовать его для создания 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>

Обновление от 06 августа 2015 г.

Просматривая примечания к выпуску плагина asset-pipeline, я заметил, что не -digest-версии активов больше не хранятся в WAR-файле. Это будет означать, что предлагаемое мной решение не работает, когда приложение развертывается как WAR:

31 мая 2015 г. Выпуск 2.2.3. Больше не сохраняются версии без дайджеста в файле war, что сокращает накладные расходы вдвое. Также удалена зависимость ввода/вывода Commons. Более быстрый поток байтов.

Это означает, что вы должны заранее явно определить все свои изображения и больше не можете динамически создавать путь в своих скриптах:

<g:javascript>
    window.grailsSupport = {
        myImage1 : '${assetPath(src: 'myImage1.jpg')}',
        myImage2 : '${assetPath(src: 'myImage2.jpg')}'
    };
</g:javascript>

Обновление от 25 мая 2016 г.

Теперь можно указать, будут ли не-дайджест версии активов включены в созданный war-файл, установив grails.assets.skipNonDigests (по умолчанию false):

Обычно нет необходимости отключать «skipNonDigests». Tomcat по-прежнему будет автоматически обслуживать файлы по имени, не являющемуся дайджестом, и будет копировать их, используя storagePath через карту псевдонимов manifest.properties. Это просто сокращает хранилище вдвое. Однако, если вы пытаетесь выполнить такие действия, как загрузка на cdn вне плагина cdn-asset-pipeline и через содержимое target/assets. Это все еще может быть полезно.

Обратите внимание, что вы по-прежнему можете использовать предлагаемое решение для предварительного определения всех необходимых изображений, чтобы обойти проблемы с кэшированием в браузере (поскольку дайджест-версия актива имеет хеш содержимого в имени файла).

person Clemens Sum    schedule 14.08.2014
comment
Хороший ответ, но у меня недостаточно очков репутации, чтобы проголосовать за - person Scott Griz; 21.08.2014

arrow_upward
10
arrow_downward

Да, вы можете, поставив ${assetPath(src: 'img.png')} в свой gsp.

person davydotcom    schedule 29.06.2014
comment
Это, безусловно, самый простой и прямой ответ. - person Gideon; 24.05.2016
comment
@davydotcom, как я могу использовать ${assetPath(src: 'img.png')} в файле javascript или файле таблицы стилей? Я использую Grails: assets: url: assets.domain.com storagePath: /opt/domain/assets / - person Adrian Rodriguez; 31.05.2017

arrow_upward
6
arrow_downward

Я не знаю, какое идеальное решение в вашем случае, но решение может быть таким:

  1. Используйте относительные пути, такие как «../assets/use-control.png», в вашем коде js.
  2. Добавьте img в свой дом и укажите ссылку на него из кода js.
  3. Добавьте атрибут data-imgpath="${asset.assetPath(src: 'use-control.png')}" к соответствующему элементу в вашем доме и используйте эту ссылку.
person jgeerts    schedule 12.06.2014
comment
Этот ответ сработает, я не могу проголосовать за него, так как у меня недостаточно очков репутации. - person Scott Griz; 16.06.2014
comment
Мне тоже нравится этот ответ, но я не могу проголосовать за него, так как у меня еще недостаточно очков репутации. - person Scott Griz; 21.08.2014

arrow_upward
0
arrow_downward

В качестве альтернативы вы можете использовать атрибут data-* HTML5.
Здесь я объяснил немного подробнее: загружать изображения из javascript

person magiccrafter    schedule 20.08.2014