时间戳

首页 > 解决方案 > django模板中损坏的图像图标

html - django模板中损坏的图像图标

问题描述

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

这是我的设置

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 文件

我究竟做错了什么？！

标签： htmlcssdjangostatic

解决方案

问题 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 标签。您还应该将标题、元和链接标签移动到头部。

希望这可以帮助！让我知道这是否有效。

推荐阅读