2401_83318414 2024-05-03 16:20 采纳率: 0%
浏览 41

{% load static %}使用出现的问题

就是这样写的啊，开头加了这一句{%load static%},怎么网页中直接输出来了[face]emoji:010.png[/face]

img


图片也没有影子了

img


还有为什么我的bootstrap的样式为什么没出现啊😭

  • 写回答

5条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-05-03 16:20
    关注

    引自免费微信小程序：皆我百晓生

    看起来你在尝试在Django项目中使用静态文件（如CSS、JavaScript和图片），但遇到了一些问题。让我帮你解决这些问题。

    首先，让我们检查一下你的HTML模板中的静态文件引用。在你的代码中，我发现了一些格式错误，比如在<script>和<link>标签的src属性中，路径应该是{% static '...' %}而不是{f% static '...' %}。修复这些错误后，代码应该像这样：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-4.6.2-dist/css/bootstrap.css' %}">
</head>
<body>
    ...
    <img src="{% static 'img/1.png' %}" alt="">
    ...
    <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-4.6.2-dist/js/bootstrap.js' %}"></script>
</body>
</html>

    确保你的Django项目结构正确，并且静态文件位于正确的目录下。根据你的描述，你的项目结构可能是这样的：

    djangoProject1
|-- manage.py
|-- djangoProject1 (project folder)
|   |-- settings.py
|   |-- urls.py
|   |-- wsgi.py
|-- app01 (app folder)
|   |-- migrations
|   |-- templates
|       |-- app01
|           |-- user_list.html
|-- plugins
|   |-- bootstrap-4.6.2-dist
|       |-- css
|       |-- js
|-- img
|   |-- 1.png
|-- js
|   |-- jquery-3.7.1.min.js

    接下来，在你的settings.py中，确保已正确配置静态文件设置。添加以下代码到你的settings.py：

    # 在其他import语句之后
from pathlib import Path

# 添加以下代码
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

# 如果你使用Django 2.0及以上版本，使用以下代码替代上面两行
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

    然后，你需要运行命令来收集静态文件：

    python manage.py collectstatic

    这将把所有静态文件复制到STATIC_ROOT指定的目录（默认为STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')）。如果没有创建这个目录，系统会自动创建。

    最后，确保你的浏览器缓存已清除，因为有时旧的CSS样式可能会影响新样式表的加载。现在刷新页面，你应该能看到Bootstrap样式生效，图片也应该能正常显示了。如果你仍然遇到问题，请检查浏览器的开发者工具网络面板，看看是否有任何静态资源请求失败或返回404错误。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 5月3日

悬赏问题

  • ¥50 大区域的遥感影像匹配 怎么做啊
  • ¥15 求解答：pytorch跑yolov8神经网络受挫
  • ¥20 Js代码报错问题不知道怎么解决
  • ¥15 gojs 点击按钮node的position位置进行改变，再次点击回到原来的位置
  • ¥15 计算决策面并仿真附上结果
  • ¥20 halcon 图像拼接
  • ¥15 webstorm上开发的vue3+vite5+typeScript打包时报错
  • ¥15 vue使用gojs，需求在link中的虚线上添加方向箭头
  • ¥15 CSS通配符清除内外边距为什么可以覆盖默认样式？
  • ¥15 SPSS分类模型实训题步骤