如何以最简方式实现多图片盒的特定地点随机图片生成网页

方案1：优化Unsplash API关键词匹配（推荐） #

Unsplash随机图API支持精准关键词过滤，之前匹配不准大概率是关键词不够具体。只需在URL中添加精准的景点英文名称/专属关键词，就能获取对应地点的随机图。

核心URL格式 #

https://source.unsplash.com/random/[图片宽度]x[图片高度]?[精准关键词]

• 关键词用英文，比如自由女神像用statue of liberty，泰姬陵用taj mahal，埃菲尔铁塔用eiffel tower
• 可叠加多个关键词缩小范围，比如statue of liberty,new york

适配你的HTML代码示例 #

直接替换原有img的src即可，CSS无需修改：

<div class="image-container">
  <div class="image-box">
    <img src="https://source.unsplash.com/random/600x400?statue of liberty" alt="自由女神像">
  </div>
  <div class="image-box">
    <img src="https://source.unsplash.com/random/600x400?taj mahal" alt="泰姬陵">
  </div>
  <div class="image-box">
    <img src="https://source.unsplash.com/random/600x400?eiffel tower,paris" alt="埃菲尔铁塔">
  </div>
</div>

方案2：本地图片随机切换（100%精准） #

如果Unsplash结果仍不符合预期，可准备每个景点的3-5张本地图片，用几行JS实现完全可控的随机切换：

步骤 #

1. 新建images文件夹，存放各景点图片，比如：
   • statue1.jpg、statue2.jpg（自由女神像）
   • taj1.jpg、taj2.jpg（泰姬陵）
2. 修改HTML，给每个img添加唯一ID：

<div class="image-container">
  <div class="image-box">
    <img id="statue-img" alt="自由女神像">
  </div>
  <div class="image-box">
    <img id="taj-img" alt="泰姬陵">
  </div>
</div>

3. 在HTML底部添加JS代码：

// 各景点图片列表
const statueImages = ['images/statue1.jpg', 'images/statue2.jpg', 'images/statue3.jpg'];
const tajImages = ['images/taj1.jpg', 'images/taj2.jpg', 'images/taj3.jpg'];

// 随机获取图片函数
function getRandomImage(list) {
  const randomIndex = Math.floor(Math.random() * list.length);
  return list[randomIndex];
}

// 为每个图片容器设置随机图
document.getElementById('statue-img').src = getRandomImage(statueImages);
document.getElementById('taj-img').src = getRandomImage(tajImages);

方案1是最简实现，无需额外资源；方案2适合对图片精准度要求极高的场景。

内容的提问来源于stack exchange，提问作者kalki