我在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/

10-13 07:22
查看更多