我在Django上通过外部CSS加载图像时遇到问题。使用内联CSS可以很好地工作,但我想了解为什么使用外部CSS不起作用。任何帮助都将不胜感激:
我的树:
├───migrations
│ └───__pycache__
├───static
│ └───website
│ ├───css
│ ├───img
│ └───js
├───templates
│ └───website
└───__pycache__
CSS:
.body {
background: url('/static/website/img/Racoon.jpg');
}
HTML:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'website/css/main.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
{% block title %}
<title> Home </title>
{% endblock %}
{% block content %}
<h1> Home </h1>
<p> Homepage of the website </p>
{% endblock %}
settings.py:
STATIC_URL = '/static/'
第页。S我使用的是localhost,图像确实通过URL加载:http://127.0.0.1:8000/static/website/img/Racoon.jpg
替换:
.body {
background: url('/static/website/img/Racoon.jpg');
}
带有
.body {
background: url('../img/Racoon.jpg');
}
../
表示父目录。您首先返回到static/website
文件夹,然后转到img
文件夹并找到您的图像。
如果仍然无法工作,请清除浏览器历史记录,然后重试
只需键入命令python manage.py collectstatic在正确使用上述后,我也一样