如何使用Objective-C从URL展示图片列表并显示图片名称？

嘿，这个需求其实挺常见的，我给你拆解几个实用的实现思路，不管你是用纯前端静态写，还是需要动态生成，都能轻松搞定👇

如果你的图片数量不多，直接用语义化的HTML结构就能搞定，核心是把每张图片和它的名称放在一个独立容器里，推荐用<figure>+<figcaption>组合——这俩标签就是专门为图片和说明设计的，语义化拉满。

代码示例： #

<!-- 外层容器用来统一控制布局 -->
<div class="image-gallery">
  <!-- 每个图片项用figure包裹 -->
  <figure class="gallery-item">
    <img src="https://example.com/image1.jpg" alt="日落海滩">
    <figcaption>日落海滩</figcaption>
  </figure>
  <figure class="gallery-item">
    <img src="https://example.com/image2.jpg" alt="雪山全景">
    <figcaption>雪山全景</figcaption>
  </figure>
  <figure class="gallery-item">
    <img src="https://example.com/image3.jpg" alt="城市夜景">
    <figcaption>城市夜景</figcaption>
  </figure>
</div>

再加一点CSS让它们排列整齐，还能做响应式：

.image-gallery {
  display: grid;
  /* 自动根据屏幕宽度调整列数，最小250px一列 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px; /* 图片之间的间距 */
  padding: 20px;
}

.gallery-item {
  margin: 0;
  text-align: center; /* 让图片名称居中 */
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
  border-radius: 8px; /* 可选：给图片加圆角更美观 */
}

.gallery-item figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}

这个方法简单直接，适合静态的少量图片，不用写JS就能搞定。

如果你的图片列表是从后端接口获取的，或者数量特别多，手动写HTML太麻烦，就用JS循环动态生成DOM元素，实现数据和结构分离。

代码示例： #

<!-- 先准备一个空的容器 -->
<div id="imageGallery" class="image-gallery"></div>

<script>
// 模拟从后端接口拿到的图片数据，实际开发中可以替换成接口请求
const imageData = [
  { url: "https://example.com/image1.jpg", name: "日落海滩" },
  { url: "https://example.com/image2.jpg", name: "雪山全景" },
  { url: "https://example.com/image3.jpg", name: "城市夜景" }
];

// 获取容器元素
const galleryContainer = document.getElementById('imageGallery');

// 遍历图片数据，逐个生成图片项
imageData.forEach(imgInfo => {
  // 创建figure容器
  const figure = document.createElement('figure');
  figure.className = 'gallery-item';
  
  // 创建img标签
  const img = document.createElement('img');
  img.src = imgInfo.url;
  img.alt = imgInfo.name; // alt属性别忘了，提升 accessibility
  img.loading = "lazy"; // 可选：开启懒加载，优化页面加载速度
  
  // 创建图片名称标签
  const caption = document.createElement('figcaption');
  caption.textContent = imgInfo.name;
  
  // 把元素组装起来，添加到容器里
  figure.appendChild(img);
  figure.appendChild(caption);
  galleryContainer.appendChild(figure);
});
</script>

CSS还是用上面的样式就行，这样后续修改图片只需要调整imageData数组（或者接口返回的数据），不用手动改HTML，维护起来更方便。

• 懒加载优化：给img标签加上loading="lazy"属性，让图片进入视口才加载，提升页面初始加载速度。
• 加载占位图：如果图片加载慢，可以给img设置一个背景色或者占位图，避免页面空白。
• 点击放大：如果需要点击图片查看大图，可以给img添加点击事件，用JS弹出一个模态框（自己写几行CSS+JS就能实现，不用依赖外部库）。
• 响应式调整：可以通过CSS的@media查询，在小屏幕上改成单列显示，适配手机端。

内容的提问来源于stack exchange，提问作者Owen.Wang