Прослушиватель событий из файла js stati c, указывающий на неверный путь в Django

Question

Это первый раз, когда я пытаюсь интегрировать интерфейс с сервером в Django. В настоящее время у меня есть следующая структура файла:

my_project
 | 
 +-- my_app
 |  |  
 |  +-- ...
 |  +-- static
 |  |  |
 |  |  +--my_app
 |  |  |  +--app.js
 |  |  |  +--style.css
 |  |  |  +--back.png
 |  |  |  +--dice-1.png
 |  |  |  +--dice-2.png
 |  |  |  +--dice-3.png
 |  |  |  +--dice-4.png
 |  |  |  +--dice-5.png
 |  |  |  +--dice-6.png
 |  +-- templates
 |  |  |
 |  |  +--my_app
 |  |  |  +--index.html
 |  |  
 +-- manage.py

Проблема в том, что мой css файл из my_app / stati c загружается просто отлично - включая исходный файл изображения на странице, но когда я пытаюсь делая событие щелчка в файле приложения. js для загрузки изображения из папки stati c, на консоли появляется сообщение об ошибке:

GET http://localhost:8000/js_dom/dice-1.png 404 (Not Found)

из моего файла js:

    // setter: change dice img
    var diceDOM = document.querySelector('.dice');  // select dice DOM
    diceDOM.src = `dice-${dice}.png`;  // use correct png based on roll <-- this is where I am getting the error
});

Исходное изображение загружается из моего html файла:

<img src="{% static 'js_dom/dice-5.png' %}" alt="Dice" class="dice"> 

И путь, по которому оно загружается, равно:

http://localhost:8000/static/js_dom/dice-5.png

Что сильно отличается от что я получал от консоли, которая выдавала ошибку.

Я удостоверился, что загрузил все файлы stati c из settings.py:

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

Вот urls.py проект:

from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('js_dom/', include('js_dom.urls'))
]

Вот urls.py приложения:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.js_dom)
] 

Есть ли способ настроить, куда указывает щелчок? (/ static / js_dom / вместо / js_dom /)

Answer 1

Ну, похоже, вы поняли, что ваша проблема связана с неправильной ссылкой на путь к изображению.

Когда вы делаете это:

diceDOM.src = `dice-${dice}.png`;

Вы фактически добавляете dice-1.png как относительный путь к вашему текущему URL. Так, например, если у вас было 127.0.0.1:8000/some/path, то теперь у вас будет 127.0.0.1:8000/some/path/dice-1.png.

Есть два способа получить фактический путь к вашему изображению:

1. Жесткое кодирование пути

diceDOM.src = `/static/js_dom/dice-${dice}.png`;

Сохранение пути к изображению в виде переменной js при рендеринге шаблона.

Таким образом, в вашем файле HTML будет (при условии, что вы передаете номер кости в виде dice строковой переменной в ваших данных контекста):

<script type="text/javascript">
    var image_src = "{% static 'inventario/img/dice-'|add:number|add:'.png' %}";
</script>

Тогда в вашем файле js вы можете иметь:

diceDOM.src = image_src;