grails資產管道：如何在javascript中動態查找圖像url（帶挖空）

Question

當您在頁面上可能會更改一些圖像資源時，最佳做法是什麼（因爲您正在創建一部分DOM與Knockout，Angular，無論），你需要把網址放在一起？

爲了簡單起見，假設我有一組表示從0到100％的進度圖片，我想插入的代碼塊，有效地做這樣的事情：

var oImg=document.createElement("img"); 
var percent = calculateSomeOtherThingHere(); 
oImg.setAttribute('src', 'SOME URL GOES HERE%/pctImage' + percent); 
document.body.appendChild(oImg); 

此外，如何確保資產管道瞭解我在呈現頁面時可能需要任何這些圖像（從pctImage0到pctImage100）？

任何線索有人嗎？謝謝。

Answer 1

如果您在使用Grails 3.X與資產插件，你可以插入認爲，這一代碼（或佈局）GSP文件：

<g:javascript> 
    var grailsRes = { 
     pctImage1 : '${assetPath(src: '1.jpg')}', 
     pctImage2 : '${assetPath(src: '2.jpg')}', 
     pctImage3 : '${assetPath(src: '3.jpg')}', 
     //... 
     pctImage98 : '${assetPath(src: '98.jpg')}', 
     pctImage99 : '${assetPath(src: '99.jpg')}', 
     pctImage100 : '${assetPath(src: '100.jpg')}' 
    }; 
</g:javascript> 

然後，改變你的JavaScript代碼類似這個：

var oImg=document.createElement("img"); 
var percent = calculateSomeOtherThingHere(); 
oImg.setAttribute('src', grailsRes['pctImage' + percent]); 
document.body.appendChild(oImg); 

對於更簡單的代碼，你可以使用一個數組索引訪問。

檢查grails assets plugin documentation here。