如何更改 flexslider 中的图像？

Question

我知道这是一个非常基本的问题，但它让我很困惑——我找不到太多关于 flexslider 的文档。 另外，我对这种语言很陌生，我是 C++ / ASM 类型的人，但正在尝试设置网页。 该页面适用于 inte.net 广播电台。 slider 用于显示当前播放、下一张和以后专辑的专辑封面。 图像名称在 slider 中是“硬编码”的，如果不需要更改图像，这很好。 问题是图像每 3 分钟更改一次，但浏览器会缓存它们，因此即使图像文件内容更改，也会显示旧图像数据。

我在过去几周开发了一项 Windows 服务，该服务从 SQL 数据库（除其他外）更新实际图像文件（Playing.jpg、Next.jpg 等），结果发现一旦 slider 被初始化，显示的图像不要改变。

无论如何，slider 是否仅用于“静态”图像？ 关于如何动态更新图像的任何建议？ php / JS？

<li> <img src="Playing.jpg" alt="" >
   <div class="flex-caption">
      <h2>Now Playing</h2>
   </div>
</li>

谢谢！

保持文件名相同但更改图像内容没有区别。 动态更改 slider 图像的一般方法是什么？ 代码片段将不胜感激。

Answer 1

为了避免浏览器缓存，您可以添加这样的随机查询：

PHP：

<li> <img src="Playing.jpg?v=<?php echo rand(); ?>" alt="" >
   <div class="flex-caption">
      <h2>Now Playing</h2>
   </div>
</li>

记者：

<li> <img src="Playing.jpg" alt="" id="imageid">
   <div class="flex-caption">
      <h2>Now Playing</h2>
   </div>
</li>
<script>
document.getElementById("imageid").src="Playing.jpg?v="+Math.random();
</script>

Answer 2

Mehedi 的回答很好，但随机字符串可能会发生冲突，并且Math.random()返回一个浮点数，integer 会更好。
所以，最好使用服务器当前 UNIX 时间，例如：

PHP

<li>
  <img src="Playing.jpg?v=<?php echo time(); ?>" alt="" />
  <div class="flex-caption">
    <h2>Now Playing</h2>
  </div>
</li>

JavaScript

 document.getElementById("imageid").src = `Playing.jpg?v=${Date.now()}`; document.getElementById("imageid").alt = `Image Name: Playing.jpg?v=${Date.now()}`;

 <li> <img src="Playing.jpg" alt="" id="imageid" /> <div class="flex-caption"> <h2>Now Playing</h2> </div> </li>

然而，这对用户不利，因为他总是在下载图像。 最好的解决方案是更改数据库中的文件名并将该数据以某种方式传递给您的代码（可能是 API 端点或其他东西）。
此外，由于图像每 3 分钟更改一次，您可以在localStorage中设置一个 cookie，并每隔 3 分钟检查一次，然后再在<img>中传递一次。

就个人而言，我会使用 API 方法 go。