这是我第一次尝试在 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
问题是我来自 my_app/static 的 css 文件加载得很好 - 包括页面上的初始图像文件，但是当我尝试在 app.js 文件上执行单击事件以从静态文件夹加载图像时，我得到控制台上的错误：
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
这与我从引发错误的控制台获得的信息非常不同。
我确保从 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/)
好吧，您似乎知道您的问题是由于没有正确引用图像路径。
当你这样做时：
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。
有两种方法可以获得图像的实际路径：
diceDOM.src = `/static/js_dom/dice-${dice}.png`;
因此，在您的HTML 文件中，您将拥有（假设您将骰子编号作为dice上下文数据中的字符串变量传递）：
<script type="text/javascript">
var image_src = "{% static 'inventario/img/dice-'|add:number|add:'.png' %}";
</script>
然后，在您的 js 文件中，您可以拥有：
diceDOM.src = image_src;
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句