Question

当您拥有可能在页面上更改的大量图像资源时，最佳做法是什么（因为您正在使用Knockout，Angular等创建DOM的一部分）并且您需要将URL组合在一起？

为简单起见，假设我有一组代表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和assets插件，您可以在视图（或布局）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。

grails资产管道：如何在javascript中动态查找图片网址（带淘汰赛）

1 个答案: