Question

我在我的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是我创建的应用程序图像在main / static / ignite-cover.jpg

中

此图像未显示帮助

Answer 1

注意双引号，它们会破坏你的url（）参数，改为使用单引号：

background-image: url("{% static 'ignite-cover.jpg' %}");

现在，还有一件事要做，你必须将该行传递给你的.html模板，你不能在静态文件中使用模板标签，这里有一些解决方法但是它们都有一些缺点。

对于您的情况，您可以使用相对路径，而不是使用不必要的样式（bad for caching）填充.html文件：

background-image: url("your/static/directory/ignite-cover.jpg");

希望这有帮助！

静态文件夹中的图像未显示

1 个答案: