django模板中损坏的图像图标答案

【问题标题】：broken image icon in django templatedjango模板中损坏的图像图标
【发布时间】：2021-04-01 14:54:44
【问题描述】：

我的图片和我的背景图片将无法加载。我已经尝试了很多事情，但无法弄清楚。我总是得到损坏的图像图标，而背景不会加载...

这是我的设置

import os
from pathlib import Path
.
.
.
.
.
.
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'reviews/static')

这是我的 urls.py

from django.conf import settings
from django.conf.urls.static import static

from . import views

urlpatterns = [
    path('', views.index, name='index')

    ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

这是我的模板 home.html

{% load static %}

<center>
<html>
<head>
    {% load static %}

        <link rel="stylesheet" href="home.css">
</head>

<body>
    <div class="container">

    </div>
</body>

<h2>WELCOME </h2>

<img src="{% static 'logo.jpeg' %}" >

<a href="http://localhost:8000/shop">SHOP</a>

<a href="http://localhost:8000/reviews/">REVIEW</a> 





<div id="overlay"></div>


<title>yorleì</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
  background-image: url('/static/reviews/Background.jpeg');
  min-height: 100%;
  background-position: center;
  background-size: cover;
}
</style>
<body>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-black">
  <div class="w3-display-topleft w3-padding-large w3-xlarge">

  </div>
  <div class="w3-display-middle">
    <h1 class="w3-jumbo w3-animate-top">COMING SOON</h1>
    <hr class="w3-border-grey" style="margin:auto;width:40%">
    <p class="w3-large w3-center">35 days left</p>
  </div>
</div>
</center>
</body>
</html>

我总是得到一个破碎的形象！请帮帮我！该文件也没有连接到我命名为 home.css 的 css 文件

我做错了什么？！

【问题讨论】：

该文件也被保存到一个名为 static 的文件夹中
向我们展示您的整个文件夹结构
我上传了一张照片
你的settings.STATIC_URL 和settings.STATIC_ROOT 是什么。另外，您的服务器运行情况如何？您是在开发中使用python manage.py runserver 还是在生产中运行它？

标签： html css django static

【解决方案1】：

问题 1) CSS 文件不工作。

试试这个：<link rel="stylesheet" href="{% static 'reviews/home.css' %}">

我还建议创建一个 css 文件夹以正确分隔文件，如果您打算添加任何 JavsScript 文件，则与 js 相同。例如，reviews/css/home.css 和 reviews/js/home.js。

问题 2) 背景图片不工作。

试试这个：background-image: url("{% static 'reviews/Background.jpeg' %}");

如果您的图片没有显示（就像我刚刚测试时那样），那么请确保您没有将白色图片放在白色背景上哈哈！同样，对于通常的做法，您不希望 html 文件中有两个 body 标签。您还应该将标题、元和链接标签移到头部。

希望这会有所帮助！让我知道这是否有效。

【讨论】：