JS：从文件夹中选择任何头像答案

【问题标题】：JS: Select any avatar from a folderJS：从文件夹中选择任何头像
【发布时间】：2021-02-19 05:08:26
【问题描述】：

所以我正在做一些项目，在网站的某些部分，我确实需要显示来自特定文件夹的随机头像图像，每 X 秒（我为此使用 setInterval）。

但问题是我无法选择随机图像。

所以基本上这是我的代码的一部分：

setInterval(function() {
    $('#avatar').attr('src', 'assets/img/avatars/*.jpg');
}, 1500);

如您所见，我已经尝试过 *.jpg 但它不起作用。

您还有其他想法吗？

谢谢！

【问题讨论】：

要完成这项工作，您需要一种将所有可用图像路径读取到数组中的方法（对它们进行硬编码，或者通过调用一些服务器端逻辑来检索它们）然后您可以选择来自数组的随机路径并将其设置为 img src

标签： javascript php html jquery random

【解决方案1】：

正如 Rory McCrossan 所建议的，您可以创建一个包含所有头像图像的数组。之后在你的 setInterval 函数中，你使用 Math.Random 从给定的数组长度生成一个随机整数，并在此基础上获取头像并显示它。

var avatars = [
"img/pic1.jpg",
"img/pic2.jpg",
"img/pic3.jpg",
"img/pic4.jpg",
"img/pic5.jpg"
];

setInterval(function(){
  var random = Math.floor(Math.random() * avatars.length);
  var item = avatars[random];
  $('#avatar').attr('src', item);
  $('#avatar').attr('alt', item);
},2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="avatar" alt=""/ >

【讨论】：

在做这个话题之前我已经这样做了。但问题是我确实需要放置大约 2-300 个化身，所以将它们全部放在一个数组中是一件很痛苦的事情。
您的头像列表在哪里？它是在服务器端还是在 json 文件或服务中？
我不确定我得到了你。但它们位于一个文件夹（本地文件夹）中，稍后我将上传到服务器上。
在这种情况下，我建议您将此 javascript 逻辑移动到服务器端并公开一个 API 端点，该端点将在您调用该 API 时提供一个随机头像图像 url。同样从性能的角度来看，我还建议您将服务工作者集成到客户端应用程序中以加快图像加载速度。