记django加载静态文件的坑

前置条件

1. 确保django.contrib.staticfiles，已经添加到settings.py中的INSTALLED_APPS
2. 确保在settings.py中设置了STATIC_URL

错误

错误一：
一开始为了偷懒使用VScode，js用路径为“appname/static/img/XXX.png”引用图片时编译器也能正常加载出来

但是页面展示不出来：

错误二：
使用路径“…/”的js正常引用图片，编译器也能成功找到图片如下所示：
但是在这里都不行，请求的路径还是出错，如下图所示：

解决

因为已经在setting设置了静态文件，所以在js导入图片只需要“/static/img/xxx.png”就行了，如下图所示：

这样请求时就能找到图片位置，响应结果如下：

这里的VScode没有加载图片，但是实际上在django项目的setting设置好静态文件加载后可以在js直接通过“/static/img/xxx.png”去导入图片。同理在css文件下也可以使用这种写法。