我在HTML文档的顶部保留了{%load staticfiles%}
我的css和js文件运行正常
{% load staticfiles %}
<html>
<head>
<meta charset="utf-80">
<title>Nirmaan@BPHC</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="{% static "js/nirmaan.js" %}"> </script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/nirmaan-css.css" %}">
</head>
<body>
<div class="three"></div>
</body>
</html>
我的CSS
{% load staticfiles %}
.three {
background-image: url("{% static "ignite-cover.jpg" %}");
background-size:cover;
height:100px;
}
我创建的应用主要在哪里
图片在main / static / ignite-cover.jpg中
该图像未显示
救命
最佳答案
请注意,双引号破坏了您的url()参数,请改为使用单引号:
background-image: url("{% static 'ignite-cover.jpg' %}");
现在,还有一件事要做,您必须将该行传递到.html模板,您不能在静态文件中使用模板标签,对此有一些解决方法,但是它们都有一些缺点。
对于您的情况,使用相对路径应该很好,而不是使用不必要的样式(bad for caching)来填充.html文件:
background-image: url("your/static/directory/ignite-cover.jpg");
希望这可以帮助!
关于html - 我的静态文件夹中的图像未显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30889162/