javascript函數應在Django模板中的2張圖像之間切換，但不要

Question

我有一個js函數，當單擊按鈕時應在2張圖像之間切換。 此功能可以很好地切換html頁面中的圖像，但是當我在django項目中使用它時，無法更改模板中的圖像。

最初的情況是這樣的：加載頁面時顯示第一張圖像，單擊按鈕時它嘗試更改為第二張圖像，但找不到源並出現404錯誤，第二次單擊也無法加載回到第一張圖片； 因此我固定了第二張圖像的路徑，現在一次按一次按鈕可以正確加載第二張圖像，但是再次單擊卻無法加載第一張圖像，第三次按下按鈕可以正確加載第二張圖像，這是向前的一步。

因此，我將路徑固定為第一個圖像（兩個圖像都具有相同的路徑），現在單擊按鈕不會執行任何操作，第一個圖像保持靜止。 路徑是這樣的： ProjectName/AppName/static/AppName/dog1.jpg

{%load static%}
<img id="avatar" src="{% static 'AppName/dog1.jpg' %}" class="avatar">
<button id="Btn">Click me to change dogs<button> 

const dogs = [ "dog1.jpg", "/static/AppName/dog2.jpg" ];
const avatar = document.getElementById('avatar');
/*const dogs this way makes the function changeDog loads dog2.jpg perfectly every time is supposed to,
but fails to load back dog1.jpg; if I change
const dogs = [ "/static/AppName/dog1.jpg", "/static/AppName/dog2.jpg" ]
pressing the button do nothing and dog1.jpg is always displayed.*/

function changeDog() {
  const dog = avatar.src.split('/').slice(-1)[0];
/* I think the error may occours here split('/') */
  const index = dogs.indexOf( dog );
  console.log(dog)

  avatar.src = dogs[ ( index + 1 ) % dogs.length ];
  console.log( avatar.src );
}

var Btn = document.getElementById('Btn');
Btn.addEventListener('click', changeDog);

當const dogs = [ "dog1.jpg", "/static/AppName/dog2.jpg" ];

第一次點擊：一切都很好

第二次點擊：

dog1.jpg：1 GET htp：//127.0.0.1：8000 / AppName / dog1.jpg 404（未找到）

當const dogs = [ "/static/AppName/dog1.jpg", "/static/AppName/dog2.jpg" ]; 單擊該按鈕不執行任何操作，在控制台中沒有錯誤， dog1.jpg 。

真的很感謝任何幫助，希望能解決這個問題。

Answer 1

const index = dogs.indexOf("/static/AppName/" + dog );

我必須創建一個包括相對路徑的索引，雖然不是很直觀，但是它確實有效。