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

Question

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

Answer 1

您可以定义一个全局可用的对象,该对象包含资产目录的根路径,并使用它来构建资产的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插件的发行说明时,我注意到非消化版本的资产不再存储在WAR文件中.这意味着当应用程序部署为WAR时,我建议的解决方案会中断:

2015年5月31日2.2.3版本 - 不再将非摘要版本存储在war文件中,将开销减少一半.同时删除了Commons i/o依赖.更快的字节流.

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

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

更新2016-05-25

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

通常没有必要关闭'skipNonDigests'.Tomcat将自动仍以非摘要名称提供文件,并通过manifest.properties别名映射使用storagePath将其复制出来.这简单地将存储减少了一半.但是,如果您尝试上传到cdn-asset-pipeline插件之外的cdn以及"target/assets"的内容.这可能仍然有用.

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

Answer 2

是的,你可以通过${assetPath(src: 'img.png')}加入你的gsp

Answer 3

我不知道你的理想解决方案是什么,但解决方案可能是:

1. 在js代码中使用"../assets/use-control.png"之类的相对路径.
2. 在你的dom中添加img并从你的js代码中引用它.
3. data-imgpath="${asset.assetPath(src: 'use-control.png')}"在dom中的相应元素上添加属性并使用此链接.