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

【问题标题】：How can I access images from Javascript using Grails Asset-Pipeline plugin?如何使用 Grails Asset-Pipeline 插件从 Javascript 访问图像？
【发布时间】：2014-07-25 18:20:11
【问题描述】：

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

【问题讨论】：

你在那个 javascripts 中使用过资源插件 taglib 吗？或者类似${resource(dir:"", file:"")}？
我使用了资源插件，但我无法找到访问 app.js 文件中图像位置的方法？对于 Grails 2.4，我正在使用 Asset-Pipeline Manager 但同样的问题。我看到了一个例子，他们在 GSP 中使用 g:javascript 标签声明了一个 JS Var，但我的 app.js 仍然无法引用这个变量。
使用资源插件 taglib 和资源方法（不是来自插件的本机 grails 方法），您的根从 WEB-APPS 开始。使用资产管道插件标签库和资产路径方法，根从 grails-app/assets 开始。看看我下面的例子。该文件位于文件夹 ./grails-app/assets/stylesheets/style.css 中，我在代码中使用它：assetPath(src: "stylesheets/style.css") 或在视图中作为标签：<asset:stylesheet src="style.css"/> 与资源相同

标签： javascript grails asset-pipeline

【解决方案1】：

您可以定义一个全局可用的对象来保存资产目录的根路径，并使用它来构建资产的 URL。将此 sn-p 添加到您的布局头部

<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 年 5 月 25 日更新

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

通常不需要关闭“skipNonDigests”。 Tomcat 仍将自动按非摘要名称提供文件，并将通过 manifest.properties 别名映射使用 storagePath 将它们复制出来。这只是将存储空间减少了一半。但是，如果您尝试执行诸如上传到 cdn-asset-pipeline 插件之外的 cdn 并通过“目标/资产”的内容进行的操作。这可能仍然有用。

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

【讨论】：

好答案，但我没有足够的声望点来投票

【解决方案2】：

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

【讨论】：

这是迄今为止最简单、最直接的答案。
@davydotcom，如何在 javascript 文件或样式表文件上使用 ${assetPath(src: 'img.png')} ？我正在使用 grails: assets: url: assets.domain.com storagePath: /opt/domain/assets/

【解决方案3】：

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

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

【讨论】：

这个答案会起作用，我不能投票，因为我没有足够的声望点。
我也喜欢这个答案，但我不能投票，因为我还没有足够的声望点。

【解决方案4】：

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

【讨论】：