因此，我有麻烦加载我的静态文件（图像）在我的模板时，从我的基础扩展。html，所以在我的基础上。html静态文件正在工作，例如我的favicon和我的风格都在加载。但是当我想在图表中加载图像时。HTML不工作。需要说明的是，问题出在barchart_coins.png文件上。
这是我的病历html文件
{% extends "main/base.html" %}
{% load static %}
{% block title %}Charts{% endblock %}
{% block subtitle %}<h1 class="h1">Welcome to your crypto wallet visualized</h1>{% endblock %}
{% block content %}
<img type="image/png" src"{% static "images/barchart_coins.png" %}" alt="barchart">
{% endblock %}这是我的基地。html文件
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'main/css/style.css' %}">
<title>
{% block title %}<h1>You forgot to place a title in your file<h1>{% endblock %}
</title>
<link rel="icon" type="image/png" href="{% static 'main/images/bitcoin_fav.png' %}">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/overview">Overview</a></li>
<li><a href="/data">General data</a></li>
</ul>
</nav>
</header>
<div class="body">
{% block subtitle %}<h2>>ou forgot to place a subtitle in your file<h2>{% endblock %}
{% block form %}<p>You forgot to place a fom in your file</p>{% endblock %}
{% block content %}
<p>You forgot to place a content in your file</p>
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>这是我的www.example的一部分 www.example.com 文件
STATIC_URL = '/static/'
MEDIA_URL = '/images/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static/main'),
)我的文件结构如下所示
crypto_api_site
>bitvavo_api
>crypto_api_site
>settings.py
>main
>static
>main
>images
>barchart_coins.png
>templates
>main
>base.html
>charts.html我希望我给了所有必要的文件，我期待着大家的建议。
2条答案
按热度按时间j13ufse21#
我认为它应该是单引号，而不是静态文件内部的双引号：src”{% static 'images/barchart_coins.png' %}”
huwehgph2#
看起来有点误会和概念混淆。有两种方法可以将不同文件夹中的静态文件收集到
STATIC_ROOT中：STATICFILES_DIRSstatic子文件夹在配置中，
os.path.join(BASE_DIR, 'static/main')实际上指向crypto_api_site/static/main，而crypto_api_site/static/main并不存在。但是如果启用了AppDirectoriesFinder，应该会捕获文件夹main/static，但是在运行collectstatic之后，它会导致<STATIC_ROOT>/<APP_NAME>/<PATH_TO_FILE_AFTER_APP/STATIC>e。例如crypto_api_site/static_files/main/images/barchart_coins.png这样
{% static 'main/images/bitcoin_fav.png' %}就可以工作了，因为AppDirectoriesFinder会转到main/static并在那里找到这个相对路径main/images/bitcoin_fav.png但是
{% static "images/barchart_coins.png" %}将无法工作，因为没有符合[<STATIC_ROOT>|<app/static>]/images/barchart_coins.png路径这样文件。如果你的模板在main应用程序中-这不是缩短静态文件url/path的原因。最后：
STATIC_ROOT文件夹collectstatic来查看它将在哪里找到静态文件以及它将产生什么样的文件夹结构