Question

我是django的新手，似乎无法使用bootstrap加载图像。我遇到了错误

无法解析“ {％static'images / image_name.jpg'％}

我了解它找不到路径。请注意，index.html在products/templates中，而base.html在templates/中。 index.html扩展了base.html。

请告诉我我在哪里设置path错误？

这是我的文件夹结构

folder structure

E:.
|   1.py
|   db.sqlite3
|   manage.py
+---products
|   |   admin.py
|   |    ...
|   +---migrations
|   +---templates
|   |       index.html
+---pyshop
|   |   settings.py
|   |   urls.py
|   |   wsgi.py
|   |   __init__.py
+---static
|   |   press-single.html
|   |   single.html
|   |
|   +---admin
|   |   +---css
|   |   +---fonts
|   |   +---img
|   |   \---js
|   +---css
|   |   |   aos.css
|   |   |   bootstrap-datepicker.css
|   |   |   ...
|   |   |   style.css
|   |   |
|   |   \---bootstrap
|   |           bootstrap-grid.css
|   |           bootstrap-reboot.css
|   |           bootstrap.css
|   |
|   +---fonts
|   |   +---flaticon
|   |   \---icomoon
|   +---images
|   |       ac-nc-67336.svg
|   |       ...
|   |       trimble-2.svg
|   +---js
|   |       aos.js
|   |       ...
|   |       typed.js
|   |
|   \---scss
|       |   style.scss
|       |   _site-base.scss
|       |   _site-blocks.scss
|       |   _site-navbar.scss
|       |
|       \---bootstrap
+---templates
|       base.html

index.html

<!DOCTYPE html>

{% extends 'base.html' %}
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Products</title>
</head>

<body>
{% block content %}

<div class="pb-5" style="position: relative; z-index: 8;">
    <div class="container">
        <div class="row" style="margin-top: -50px;">
            <div class="col-md-6 col-lg-4 mb-4 mb-lg-0">
                <img src="../../templates/images/img_1.jpg" alt="Image" class="img-fluid mb-3">
                <h3 class="text-primary h4 mb-2">Business Analytics</h3>
                <p>Accusantium dignissimos voluptas rem consequatur ratione illo sit quasi.</p>
                <p><a href="#">Read more</a></p>
            </div>
            <div class="col-md-6 col-lg-4 mb-4 mb-lg-0">
                <img src="{% static 'images/img_2.jpg ' %}" alt="Image" class="img-fluid mb-3">
                <h3 class="text-primary h4 mb-2">Investment Solutions</h3>
                <p>Praesentium magnam pariatur quae necessitatibus eligendi voluptate ducimus.</p>
                <p><a href="#">Read more</a></p>
            </div>
            <div class="col-md-6 col-lg-4 mb-4 mb-lg-0">
                <img src="{% static 'images/img_3.jpg ' %}" alt="Image" class="img-fluid mb-3">
                <h3 class="text-primary h4 mb-2">Individual Approach</h3>
                <p>Accusantium dignissimos voluptas rem consequatur ratione illo sit quasi.</p>
                <p><a href="#">Read more</a></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

</body>
</html>

base.html

<!doctype html>
{% load static %}
<html lang="en">
<head>
    <title>Inves &mdash; Colorlib Website Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">

    <link rel="stylesheet" href="{% static 'fonts/icomoon/style.css ' %}">

    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css ' %}">
    <link rel="stylesheet" href="{% static 'css/magnific-popup.css ' %}">
    <link rel="stylesheet" href="{% static 'css/jquery-ui.css ' %}">
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css ' %}">
    <link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css ' %}">

    <link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css ' %}">

    <link rel="stylesheet" href="{% static 'fonts/flaticon/font/flaticon.css ' %}">

    <link rel="stylesheet" href="{% static 'css/aos.css ' %}">

    <link rel="stylesheet" href="{% static 'css/style.css ' %}">

</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
{% block content %}


{% endblock %}
<script src="{% static 'js/jquery-3.3.1.min.js ' %}"></script>
<script src="{% static 'js/jquery-ui.js ' %}"></script>
<script src="{% static 'js/popper.min.js ' %}"></script>
<script src="{% static 'js/bootstrap.min.js ' %}"></script>
<script src="{% static 'js/owl.carousel.min.js ' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js ' %}"></script>
<script src="{% static 'js/jquery.sticky.js ' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js ' %}"></script>
<script src="{% static 'js/jquery.animateNumber.min.js ' %}"></script>
<script src="{% static 'js/aos.js ' %}"></script>

<script src="{% static 'js/main.js ' %}"></script>

</body>

</html>

settings.py

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'products.apps.ProductsConfig',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'pyshop.urls'

TEMPLATES = [
    {

        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'pyshop.wsgi.application'


STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

views.py

from django.http import HttpResponse
from django.shortcuts import render
from .models import Product


# Create your views here.

def index(request):
    products = Product.objects.all()
    return render(request, 'index.html', {'products': products})


# request object, html template, dictionary to import from db

def index2(request2):
    return HttpResponse('new page')

view page source

    <!DOCTYPE html>

        <!doctype html>

    <html lang="en">
    <head>
        <title>Inves &mdash; Colorlib Website Template</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">

        <link rel="stylesheet" href="/static/fonts/icomoon/style.css">

        <link rel="stylesheet" href="/static/css/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/magnific-popup.css">
        <link rel="stylesheet" href="/static/css/jquery-ui.css">
        <link rel="stylesheet" href="/static/css/owl.carousel.min.css">
        <link rel="stylesheet" href="/static/css/owl.theme.default.min.css">

        <link rel="stylesheet" href="/static/css/bootstrap-datepicker.css">

        <link rel="stylesheet" href="/static/fonts/flaticon/font/flaticon.css">

        <link rel="stylesheet" href="/static/css/aos.css">

        <link rel="stylesheet" href="/static/css/style.css">

    </head>
    <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">


    <div class="pb-5" style="position: relative; z-index: 8;">
        <div class="container">
            <div class="row" style="margin-top: -50px;">
                <div class="col-md-6 col-lg-4 mb-4 mb-lg-0">
                    <img src="../../templates/images/img_1.jpg" alt="Image" class="img-fluid mb-3">
                    <h3 class="text-primary h4 mb-2">Business Analytics</h3>
                    <p>Accusantium dignissimos voluptas rem consequatur ratione illo sit quasi.</p>
                    <p><a href="#">Read more</a></p>
                </div>
                <div class="col-md-6 col-lg-4 mb-4 mb-lg-0">
                    <img src="/static/images/img_2.jpg" alt="Image" class="img-fluid mb-3">
                    <h3 class="text-primary h4 mb-2">Investment Solutions</h3>
                    <p>Praesentium magnam pariatur quae necessitatibus eligendi voluptate ducimus.</p>
                    <p><a href="#">Read more</a></p>
                </div>
                <div class="col-md-6 col-lg-4 mb-4 mb-lg-0">
                    <img src="/static/images/img_3.jpg" alt="Image" class="img-fluid mb-3">
                    <h3 class="text-primary h4 mb-2">Individual Approach</h3>
                    <p>Accusantium dignissimos voluptas rem consequatur ratione illo sit quasi.</p>
                    <p><a href="#">Read more</a></p>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script src="/static/js/jquery-ui.js"></script>
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/owl.carousel.min.js"></script>
    <script src="/static/js/jquery.magnific-popup.min.js"></script>
    <script src="/static/js/jquery.sticky.js"></script>
    <script src="/static/js/jquery.waypoints.min.js"></script>
    <script src="/static/js/jquery.animateNumber.min.js"></script>
    <script src="/static/js/aos.js"></script>

    <script src="/static/js/main.js"></script>

    </body>

    </html>

actual webpage

编辑：将其添加到settings.py可以正常工作

STATIC_URL = '/static/'

STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),

]

Answer 1

在settings.py中添加：

# Where default server looks for static files
STATICFILES_DIRS = [
    ROOT_DIR("static"),
]

您还可以尝试：./manage.py collectstatic

编辑：

ROOT_DIR来自这里：

import environ

ROOT_DIR = environ.Path(__file__) - 3  # (/a/b/myfile.py - 3 = /)
APPS_DIR = ROOT_DIR('server/apps')

Answer 2

<img src="% static 'images/img_2.jpg ' %}"

此处缺少左花括号
文件名后（在结束单引号之前）存在不必要的空格，导致生成的静态文件URL中有多余的%20
您未配置STATIC_ROOT

请注意，您应该从os.path.join(BASE_DIR, "static")删除用于收集静态信息的目标文件夹（STATICFILES_DIRS），该文件夹是$$[QT_HOST_BINS]的（附加） source 文件夹列表静电。您当前的配置不适用于产品。

Answer 3

有两种情况，一种用于静态文件，另一种用于媒体文件。对于诸如css，js，sass之类的静态文件，您需要创建静态目录，而对于图像和视频，则需要创建媒体目录。在本地开发中，您需要创建两个文件夹，其中一个用于获取静态文件，另一个用于获取静态文件。在生产中使用AWS等外部服务来安全地获取静态或媒体文件。

python manage.py collectstatic

从其他服务器收集静态文件，该服务器以静态URL配置。希望你有主意。用于设置您的静态文件watch this video。精美地解释了如何轻松实现。也， STATICFILES_DIRS = [ BASE_DIR("static"), ] and got the error ` BASE_DIR("static"), TypeError: 'str' object is not callable 这里BASE_DIR是保存目录类型为字符串类型的对象。当您执行BASE_DIR（“ static”）时，它试图将其作为带有参数的函数来调用。这就是为什么对象不可调用错误。对于Django中所有与静态文件相关的查询，请观看视频。

Answer 4

将此行放在settings.py的末尾。

STATICFILES_DIRS = [
    STATIC_ROOT,
]

此后，您可以访问Django中此目录中的文件。希望能有所帮助！

无法解析“ {％static'images / image_name.jpg'％}

4 个答案: