如何更改 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。