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 plugin的发行说明时，我注意到非资源版本的资产不再存储在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文件中是否包含资产的非摘要版本：

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

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

Answer 2

是的，你可以在你的gsp中加上${assetPath(src: 'img.png')}

Answer 3

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

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

Answer 4

作为替代方案，您可以使用HTML5的数据 - *属性我在这里进一步解释了一下： load images from javascript

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

4 个答案: