Question

只是想知道在HTML中显示大量图片时是否有办法减少所需的代码量？

我想在一个图库中显示大约2-300张图片，目前HTML将如下所示：

<div id="scroller>
    <img src="/Content/images/decking/decking-1.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-2.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-3.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-4.jpg" width="100" alt="" />
    <img src="/Content/images/decking/decking-5.jpg" width="100" alt="" />
</div>

...但是直到图片“decking-250.jpg”。

是否有更有效的方式来显示图像，以便我没有250多行“img src”HTML？

更改文件名的唯一部分是“-1”，“ - 2”，“ - 3”等。其余部分，包括Alt标记可以保持为空。

我在ASP.Net MVC3 Razor中使用ASP.net在线教程构建此站点作为指导，如果这有助于解决任何解决方案，如果它只是必须以那种方式完成那么这也很好 - 我只是想知道是否还有其他方法我应该考虑学习？

非常感谢提前。

Answer 1

这是HTML的工作方式。您无法减少这一点，因为每张图片需要一个img标记。您可以通过PHP，JS，...动态创建该代码。但最后你会得到一长串的img标签，可能会被其他标签单独包装（例如在列表中）。

Answer 2

我同意Feela的说法，虽然它可能看起来很冗长，但是你的代码就像防弹一样。然而，如果像JS这样的东西可以使用（或者已经在使用），那么有一些选择。这没有经过测试，但您可以在Jquery / Javascript中设置一个可以压缩代码的for循环语句。例如：

for (i=1; i < 250; i++) {
    $('#scroller').append('<img src="/Content/images/decking/decking-' + i.toString() + '.jpg" width="100" alt="" />');
}

我不是ASP编码器，但也许它提供了功能相似的东西。

减少显示多个图像HTML CSS时所需的代码量

2 个答案: