Django项目静态图片无法加载，CSS/JS正常，求技术解决方案

1. 修复STATIC_DIRS配置冲突 #

你的settings.py中STATIC_ROOT和STATIC_DIRS指向了同一个目录（项目根目录下的static），这会导致collectstatic执行时出现文件覆盖或读取冲突。调整配置如下：

# settings.py
import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

STATIC_URL = '/static/'
# STATIC_ROOT 是 collectstatic 收集文件的目标目录，避免和STATIC_DIRS重复
STATIC_ROOT = os.path.join(BASE_DIR, 'static_collected')
# 若静态文件存放在项目根目录的static文件夹，修正STATIC_DIRS为绝对路径
STATIC_DIRS = [os.path.join(BASE_DIR, 'static')]

修改后重新执行python manage.py collectstatic，再重启服务。

2. 统一使用static标签处理所有静态资源 #

模板中<source>标签的webp图片未使用{% static %}标签，相对路径错误可能影响浏览器渲染逻辑，统一修正为：

<a href="#" class="item__image">
  <picture>
    <source srcset="{% static 'mstore/img/collections/featured/02.webp' %}" type="image/webp">
    <img src="{% static 'mstore/img/collections/featured/02.png' %}" alt="Lore Walnut">
  </picture>
</a>

3. 清除浏览器缓存 #

即使图片链接能直接访问，浏览器可能缓存了之前的失败请求。按下Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，或直接清空浏览器缓存后重试。

4. 检查静态文件权限 #

确保静态文件目录及文件具备可读权限，在Linux/macOS终端执行：

chmod -R 644 /你的项目根目录/static

替换路径为实际项目根目录的static文件夹路径。

5. 确认DEBUG模式下的静态服务配置 #

若处于DEBUG=True模式，确保INSTALLED_APPS中包含django.contrib.staticfiles，Django的runserver会自动处理静态文件请求；若为生产环境（DEBUG=False），需确保Nginx等web服务器已正确配置STATIC_URL的静态文件映射。

内容的提问来源于stack exchange，提问作者Librin