我如何使用Grails Asset-Pipeline插件从JavaScript访问图像？ [英] How can I access images from Javascript using Grails Asset-Pipeline plugin?

问题描述

我刚刚升级到Grails 2.4并使用Asset-Pipeline1.8.7插件。我想知道如何从Javascript访问图像。我正在使用Google Maps JavaScript V3 API，并需要在Javascript中设置一些标记图标。有没有办法在GSP上使用标签创建一些Javascript变量，然后在我的app.js代码中访问该文件？如果这是不可能的，那么如何引用编译后的图像资产？

解决方案

您可以定义一个全局可用的对象，该对象包含资产目录的根路径并使用它来构建URL到您的资产。
将此片段添加到布局的头部部分

 < g：javascript> 
 window.grailsS​​upport = {
 assetsRoot：'$ {raw（asset.assetPath（src：''））}'
}; 
< / g：javascript> 
  

然后在其他地方使用它：

 < G：的javascript> 
 var pathToMyImg = window.grailsS​​upport.assetsRoot +'images / google_maps_marker.png'; 
< / g：javascript> 
  

更新2015-08-06 $ b

在检查资产管道插件我注意到资产的非摘要版本不再存储在WAR文件中。这意味着，当应用程序部署为WAR时，我建议的解决方案会中断：

2015年5月31日
2.2.3发布 - 不再将非摘要版本存储在war文件中，将开销减半。还删除了Commons I / O依赖项。更快的字节流。

这意味着您必须事先明确定义所有图像，并且不再能够动态构建路径您的脚本：

 < g：javascript> 
 window.grailsS​​upport = {
 myImage1：'$ {assetPath（src：'myImage1.jpg'）}'，
 myImage2：'$ {assetPath（src：'myImage2.jpg'） }'
}; 
< / g：javascript> 
  

更新2016-05-25

现在可以通过设置 grails.assets.skipNonDigests 来配置资源的非摘要版本是否包含在构建的war文件中。默认是 false ）： b
$ b

通常不需要关闭'skipNonDigests 。 Tomcat将自动以非摘要名称提供文件，并将通过 manifest.properties 别名映射使用storagePath将其复制出来。这简单地将存储减半。但是，如果您尝试执行cdn-asset-pipeline插件之外的cdn上传操作，并通过目标/资产的内容执行操作。这可能仍然有用。

请注意，您仍可以使用建议的解决方案事先定义所有需要的图像，以解决缓存问题浏览器（作为资产的摘要版本具有其内容 - 文件名中的哈希）。

I have just upgraded to Grails 2.4 and am using the Asset-Pipeline1.8.7 plugin. I am wondering how to access the images from Javascript. I am using the Google Maps Javascript V3 API and need to set some marker icons in Javascript. Is there a way to create some Javascript vars on a GSP using the tag and then access the file in my app.js code? If that is not possible, how do a reference the compiled images in assets?

解决方案

You could define a globally available object that holds the root-path to your assets dir and use this to build-up URLs to your assets. Add this snippet to your layouts head-section

<g:javascript>
    window.grailsSupport = {
        assetsRoot : '${ raw(asset.assetPath(src: '')) }'
    };
</g:javascript>

Then use it elsewhere like this:

<g:javascript>
    var pathToMyImg = window.grailsSupport.assetsRoot + 'images/google_maps_marker.png';
</g:javascript>

Update 2015-08-06

While checking the release notes of the asset-pipeline plugin I noticed that non-digest versions of assets are no longer stored in the WAR-file. This would mean that my proposed solution breaks when the application is deployed as a WAR:

May 31, 2015 2.2.3 Release - No longer storing non digest versions in war file, cutting overhead in half. Also removed Commons i/o dependency. Faster byte stream.

This means that you have to explicitly define all your images beforehand and are no longer able to construct the path dynamically in your scripts:

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

Update 2016-05-25

It is now possible to configure if non-digest versions of the assets are included in the built war-file by setting grails.assets.skipNonDigests (default is false):

It is normally not necessary to turn off 'skipNonDigests'. Tomcat will automatically still serve files by non digest name and will copy them out using storagePath via the manifest.properties alias map. This simply cuts storage in half. However, if you are attempting to do things like upload to a cdn outside of the cdn-asset-pipeline plugin and via the contents of 'target/assets'. This may still be useful.

Note that you still might use the proposed solution to define all required images beforehand to work around caching issues in the browser (as the digest-version of the asset has its content-hash in the filename).

这篇关于我如何使用Grails Asset-Pipeline插件从JavaScript访问图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！