Question

我正在闲暇时间在一个小网页上工作，我正在使用python / django和bootstrap。我对前端的经验并不多，所以尝试做事非常简单。今天我看到了backstretch插件，并认为它听起来非常酷，易于设置。但现在我已经处理了几个小时，仍然没有显示图片。

这是我的代码：

<html>
<head>
    <title>{% block title %}My webpage{% endblock %}</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <style type="text/css">
       body { background: transparent !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
    </style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8">
    <h1>My Horse Farm</h1>
</div>
<div class="col-sm-4">
    {% if user %}
        Du er logget ind som: {{user.username}} - <b>Log ud</b>
    {% endif %}
</div>
</div>
<div class="row">
<div class="btn-group btn-group-justified" role="group"  style="width: 50%; margin: 0 auto;" aria-label="...">
    <a class="btn btn-default" href={% url 'frontpage' %} role="button">Frontpage</a>
    <a class="btn btn-default" href={% url 'account:profile' %} role="button">My profile</a>
    <a class="btn btn-default" href={% url 'marketplace:marketplace' %} role="button">Marketplace</a>
</div>
</div>
<div class="row">
    {% block content %}{% endblock %}
</div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script>
<script type="text/javascript" src="/jquery.backstretch.min.js"></script>
</body>
</html>


<script>
$(document).ready(function() {
    $.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
});
</script>

对于尝试加载backstretch时的行，我收到以下错误：＆＃34;无法加载资源：服务器响应状态为404（未找到）＆＃34;。

一直在尝试以不同的顺序加载脚本 - 但没有任何帮助。我做错了什么？

Answer 1

使用此：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

而不是：

<script type="text/javascript" src="/jquery.backstretch.min.js"></script>

Answer 2

您尝试通过未正确链接到静态文件夹位置的文件路径引用静态文件。虽然src="/static/jquery.backstretch.min.js"之类的东西可能会解决您的问题（静态是您在settings.py中定义的目录）。你最好使用django static template tag

{% load staticfiles %}

<script type="text/javascript" src="{% static 'jquery.backstretch.min.js' %}"></script>

您可以在django docs

中详细了解如何部署静态文件

可以根本不让Backstretch工作！尝试加载时出现404错误

2 个答案: