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

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 在线教程作为指南在 ASP.Net MVC3 Razor 中构建此站点，如果这有助于想到任何解决方案，或者如果它只是必须以这种方式完成那么那也很好 - 我只是想知道我是否应该考虑学习另一种方法？

非常感谢。

Answer 1

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