javascript - 如何使用 Grails Asset-Pipeline 插件从 Javascript 访问图像？

Question

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

Answer 1

您可以定义一个全局可用的对象，该对象保存 Assets 目录的根路径，并使用它来构建 Assets 的 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

在查看 asset-pipeline plugin 的发行说明时我注意到 Assets 的非摘要版本不再存储在 WAR 文件中。这意味着当应用程序部署为 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.

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

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

更新 2016-05-25

现在可以通过设置 grails.assets.skipNonDigests(默认为 false)来配置 Assets 的非摘要版本是否包含在构建的 war 文件中):

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.

请注意，您仍然可以使用建议的解决方案来预先定义所有必需的图像，以解决浏览器中的缓存问题(因为 Assets 的摘要版本在文件名中具有其内容哈希)。