为图像上的“alt”html 字段生成自动增量

Question

我正在使用 php 画廊脚本，我需要在“alt”字段（图像）中添加数字（自动增量）。 我已经尝试了 stackoverflow 中的几个选项，但不幸的是我没有成功。

例如： 对于添加的每个图像，alt 字段应如下所示：

alt="adidas 1">
alt="adidas 2">
alt="adidas 3">
alt="adidas and more">

我的 HTML 输出应该是这样的：

<div class="gallery">
<img src="./products/adidas-cushon.webp"/ alt="adidas 1">
<img src="./products/adidas-majestic.webp"/ alt="adidas 2">
<img src="./products/adidas-wear.webp"/ alt="adidas 3">
</div>

我的剧本

<!-- (A) CSS & JS -->
<link href="gallery/gallery.css" rel="stylesheet">
<script src="gallery/gallery.js"></script>
 
<div class="gallery"><?php
// (B) GET LIST OF IMAGE FILES FROM GALLERY FOLDER
$dir = __DIR__ . DIRECTORY_SEPARATOR . "./products/adidas/" . DIRECTORY_SEPARATOR;
$images = glob("$dir*.{jpg,jpeg,gif,png,bmp,webp}", GLOB_BRACE);
//rsort($images); // high to low
//sort($images); // low to high
natsort ($images); // 

// (C) OUTPUT IMAGES 
foreach ($images as $i) {
  printf('<img src="./products/adidas/%s" alt="adidas">', basename($i));
}
?></div>

Answer 1

在 foreach 中使用数组索引键并添加 1。

foreach ($images as $i => $path) {
  printf('<img src="./products/adidas/%s" alt="adidas %s">', basename($path),$i+1);
}