如何使用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將自動仍以非摘要名稱提供文件，並將使用storagePath通過manifest.properties別名映射將其復制出來。 這簡單地將存儲減少了一半。 但是，如果您嘗試上傳到cdn-asset-pipeline插件之外的cdn以及“target / assets”的內容。 這可能仍然有用。

請注意，您仍然可以使用建議的解決方案預先定義所有必需的圖像，以解決瀏覽器中的緩存問題（因為資產的摘要版本在文件名中包含其內容哈希）。

Answer 2

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

Answer 3

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

1. 在js代碼中使用“../assets/use-control.png”之類的相對路徑。
2. 在你的dom中添加img並從你的js代碼中引用它。
3. 在dom中的相應元素上添加data-imgpath="${asset.assetPath(src: 'use-control.png')}"屬性並使用此鏈接。

Answer 4

作為替代方案，您可以使用HTML5的data- * Attribute。
我在這里進一步解釋了： 從javascript加載圖像