django 画像の表示ができない。

前提・実現したいこと

djangoの開発用サーバー（manage.py runserver）上で画像を表示したい。

発生している問題・エラーメッセージ

Error during template rendering
In template /Users/mochidzukishun/Desktop/blog/private_diary/venv_private_diary/bin/private_diary/diary/templates/index.html, error at line 30
Invalid block tag on line 30: 'static'img/01.jpg'', expected 'endblock'. Did you forget to register or load this tag?

該当のソースコード

index.html

html
1{%　extends　'base.html' %}
2{%　load static %}
3{% block title %}Web上で質問や悩みを投稿できるサービス|Akilog{% endblock %}
4{% block header%}
5
6<header class="masthead text-center text-while">
7    <div class="masthead-content">
8        <div class="container">
9            <h1 class="masthead-heading mb-0">Akilog</h1>
10            <h2 class="masthead-subheading mb-0">質問投稿フォーラム</h2>
11            <a href="#" class="btn btn-primary btn-xl rounded-pillmt-5">Login</a>
12        </div>
13    </div>
14    <div class="bg-circle-1 bg-circle"></div>
15    <div class="bg-circle-2 bg-circle"></div>
16    <div class="bg-circle-3 bg-circle"></div>
17    <div class="bg-circle-4 bg-circle"></div>
18</header>
19{% endblock %}
20
21{% block contents %}
22<section>
23    <div class="container">
24        <div class="row align-items-center">
25            <div class="col-lg-6 order-lg-2">
26               <div class="p-5">
27                   <img class="img-fluid rounded-circle" src="{% static'img/01.jpg' %}" alt="">
28               </div>
29            </div>
30            <div class="col-lg-6 order-lg-1">
31               <div class="p-5">
32                 <h2 class="display-4">Forum</h2>
33                 <p>WEB上で編集/作成/削除まで可能</p>
34               </div>
35            </div>
36        </div>
37    </div>
38</section>
39
40<section>
41    <div class="container">
42        <div class="row align-items-center">
43            <div class="col-lg-6">
44               <div class="p-5">
45                   <img class="img-fluid rounded-circle" src="{% static'img/02.jpg' %}" alt="">
46               </div>
47            </div>
48            <div class="col-lg-6">
49               <div class="p-5">
50                 <h2 class="display-4">Save your Forum</h2>
51                 <p>あなたの投稿を保存</p>
52               </div>
53            </div>
54        </div>
55    </div>
56</section>
57
58<section>
59    <div class="container">
60        <div class="row align-items-center">
61            <div class="col-lg-6 order-lg-2">
62               <div class="p-5">
63                   <img class="img-fluid rounded-circle" src="{% static'img/03.jpg' %}" alt="">
64               </div>
65            </div>
66            <div class="col-lg-6 order-lg-1">
67               <div class="p-5">
68                 <h2 class="display-4">Membership System</h2>
69                 <p>会員専用ページ</p>
70               </div>
71            </div>
72        </div>
73    </div>
74</section>
75{% endblock %}

base.html

html
1<% load static %>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device,initial-scale=1,shrink-to-fit=no">
6    <meta name="description" content="">
7    <meta name="author" content="">
8
9    <title>{% block title%}{% endblock %}</title>
10
11    <!-- Booststrap core CSS-->
12    <link href="{% static 'vendor/booststrap/css/booststrap.min.css' %}" rel="stylesheet">
13
14    <!--Custom font for this template-->
15    <link href="https://fonts.googleapis.com/css?familiy=Catamaran:100,200,300,300i,400,700,700i,900,900i" rel="stylesheet">
16    <link href="https://fonts.googleapis.com/css?familiy=Lato:100,200,300,300i,400,700,700i,900,900i" rel="stylesheet">
17
18    <!--Custom styles for this template-->
19    <link href="{% static 'css/one-page-wonder.min.css' %}">
20
21    <!-- My style -->
22    <link rel="stylesheet" type="text/css" href="{% static'css/mystyle.css' %">
23    {% block head %}{% endblock %}
24</head>
25
26<body>
27    <div id ="wrapper">
28        <!--Navigation-->
29        <nav class="navbar-expand-lg navbar-dark navbar-customfixed-top">
30            <div class ="container">
31                <a class="navbar-brand" href="{% url 'diary:index' %}">BLOG</a>
32                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-Responsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
33                    <span class="nabar-toggler-icon"></span>
34                </button>
35
36                <div class ="collapse navbar-collaspe" id="navbarResponsive">
37                    <ul class="navbar-nav mr-auto">
38                        <li class="nav-item{% block active_inquiry %}{% endblock%}">
39                            <a class="nav-link" href="#">INQUIRY</a>
40                        </li>
41                    </ul>
42                    <ul class ="navbar-nav ml-auto">
43                        <li class ="nav-item">
44                            <a class="nav-link" href="#">SignUp</a>
45                        </li>
46                        <li class="nav-item">
47                            <a class="nav-link" href="#">Login</a>
48                        </li>
49                    </ul>
50                </div>
51            </div>
52        </nav>
53        {% block header%}{% endblock %}
54        {% block contents%}{% endblock %}
55
56        <!--Footer-->
57        <footer class="py-5 bg-block">
58            <div class="container">
59                <p class="m-0 text-center text-white small">Copylight &copy;Blog</p>
60            </div>
61            <!-- /.container -->
62        </footer>
63
64        <!-- Bootstrap core Javascript -->
65        <script src="{% static 'vender/jquery/jquery.min.js'%}"></script>
66        <script src="{% static 'vender/bootstrap/js/bootstrap.bundle.min.js'%}"></script>
67    </div>
68</body>
69</html>

setteing.py

python
1"""
2Django settings for private_diary project.
3
4Generated by 'django-admin startproject' using Django 3.1.3.
5
6For more information on this file, see
7https://docs.djangoproject.com/en/3.1/topics/settings/
8
9For the full list of settings and their values, see
10https://docs.djangoproject.com/en/3.1/ref/settings/
11"""
12
13
14import os
15# Build paths inside the project like this: BASE_DIR / 'subdir'.
16BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
17
18
19
20# Quick-start development settings - unsuitable for production
21# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
22
23# SECURITY WARNING: keep the secret key used in production secret!
24SECRET_KEY = 'jgl8tc!p##7&o1a-6)8=u(^q@vxef-6@zrc)r1@$x438@c8nhc'
25
26# SECURITY WARNING: don't run with debug turned on in production!
27DEBUG = True
28
29ALLOWED_HOSTS = []
30
31
32# Application definition
33
34INSTALLED_APPS = [
35    'django.contrib.admin',
36    'django.contrib.auth',
37    'django.contrib.contenttypes',
38    'django.contrib.sessions',
39    'django.contrib.messages',
40    'django.contrib.staticfiles',
41    'diary.apps.DiaryConfig',
42]
43
44MIDDLEWARE = [
45    'django.middleware.security.SecurityMiddleware',
46    'django.contrib.sessions.middleware.SessionMiddleware',
47    'django.middleware.common.CommonMiddleware',
48    'django.middleware.csrf.CsrfViewMiddleware',
49    'django.contrib.auth.middleware.AuthenticationMiddleware',
50    'django.contrib.messages.middleware.MessageMiddleware',
51    'django.middleware.clickjacking.XFrameOptionsMiddleware',
52]
53
54ROOT_URLCONF = 'private_diary.urls'
55
56TEMPLATES = [
57    {
58        'BACKEND': 'django.template.backends.django.DjangoTemplates',
59        'DIRS': [],
60        'APP_DIRS': True,
61        'OPTIONS': {
62            'context_processors': [
63                'django.template.context_processors.debug',
64                'django.template.context_processors.request',
65                'django.contrib.auth.context_processors.auth',
66                'django.contrib.messages.context_processors.messages',
67            ],
68        },
69    },
70]
71
72WSGI_APPLICATION = 'private_diary.wsgi.application'
73
74
75# Database
76# https://docs.djangoproject.com/en/3.1/ref/settings/#databases
77
78DATABASES = {
79    'default': {
80        'ENGINE': 'django.db.backends.sqlite3',
81        'NAME': os.path.join(BASE_DIR,'db.sqlite3'),
82    }
83}
84
85
86# Password validation
87# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
88
89AUTH_PASSWORD_VALIDATORS = [
90    {
91        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
92    },
93    {
94        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
95    },
96    {
97        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
98    },
99    {
100        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
101    },
102]
103
104# Internationalization
105# https://docs.djangoproject.com/en/3.1/topics/i18n/
106
107LANGUAGE_CODE = 'ja'
108
109TIME_ZONE = 'Asia/Tokyo'
110
111USE_I18N = True
112
113USE_L10N = True
114
115USE_TZ = True
116
117
118# Static files (CSS, JavaScript, Images)
119# https://docs.djangoproject.com/en/3.1/howto/static-files/
120
121STATIC_URL = '/static/'
122STATICFILES_DIRS = (
123    os.path.join(BASE_DIR,'static'),
124)
125
126#ロギング設定
127LOGGING = {
128    'version':1, #1固定
129    'disable_existing_loggers':False,
130
131    #ロガーの設定
132    'loggers':{
133        #Djangoが利用するロガー
134        'django':{
135            'handler':['console'],
136            'level':'INFO',
137        },
138        #diaryアプリケーションが利用するロガー
139        'diary':{
140            'handler':['console'],
141            'level':'DEBUG',
142        },
143
144    },
145    #ハンドラの設定
146    'handler':{
147        'console':{
148            'level':'DEBUG',
149            'class':'logging.StreamHandler',
150            'formatter':'dev'
151        },
152    },
153
154    'formatters':{
155        'dev':{
156            'format':'\t'.join([
157                '%(asctime)s',
158                '[%(levelname)s]',
159                '%(pathname)s(Line:%(lineno)d)',
160                '%(message)s'
161            ])
162        },
163    }
164
165}

以上となります。
お分かりになる方、アドバイスいただけましたら幸いです。
宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

index.html

html
1{%　extends　'base.html' %}
2{%　load static %}
3{% block title %}Web上で質問や悩みを投稿できるサービス|Akilog{% endblock %}
4{% block header%}

extends 'base.html'と、load staticに全角スペースがあります。

html
1<img class="img-fluid rounded-circle" src="{% static'img/01.jpg' %}" alt="">

static タグの後ろにスペースが入っていません

https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#std:templatetag-static

投稿2020/12/05 06:40

attakei

総合スコア2740

Shirona

2020/12/05 08:11

ありがとうございます。当初の問題は解決できました。新たにエラーが発生し、同様にstatic タグの修正を行いましたが、改善が見受けられませんでした。可能な範囲でアドバイスいただければと思います。 Error during template rendering In template /Users/mochidzukishun/Desktop/blog/private_diary/venv_private_diary/bin/private_diary/diary/templates/base.html, error at line 13 Invalid block tag on line 13: 'static'. Did you forget to register or load this tag?