画像データの更新処理について

問題点

Djangoを使ったホームページの画像データの更新処理の見直しをしています。
画像のアップロードが管理画面からアップロードは行えるのですが、
ホームページの更新処理画面からは画像が反映されません。
ご教授のほどよろしくお願い致します。

試したこと

Views.pyの更新処理部分を見直し下記のサイトを参考に画像取得をした際に画像のアップロードを行うコードを追加したのですが、うまくいきませんでした。
https://zenn.dev/hathle/books/django-blog2-book/viewer/02_images

ソースコード

python
1from django.contrib.auth.mixins import LoginRequiredMixin
2from django.http import HttpResponseRedirect
3from django.urls import reverse_lazy
4from django.utils import timezone
5from django.views.generic import DetailView
6from django.views.generic.edit import CreateView, UpdateView, DeleteView
7from django_filters.views import FilterView
8from django.db.models import Q
9
10from .filters import ItemFilterSet
11from .forms import ItemForm
12from .models import Item
13
14
15# 未ログインのユーザーにアクセスを許可する場合は、LoginRequiredMixinを継承から外してください。
16#
17# LoginRequiredMixin：未ログインのユーザーをログイン画面に誘導するMixin
18# 参考：https://docs.djangoproject.com/ja/2.1/topics/auth/default/#the-loginrequired-mixin
19
20class ItemFilterView(LoginRequiredMixin, FilterView):
21    """
22    ビュー：一覧表示画面
23    以下のパッケージを使用
24    ・django-filter 一覧画面(ListView)に検索機能を追加
25    https://django-filter.readthedocs.io/en/master/
26    """
27    model = Item
28
29    # django-filter 設定
30    filterset_class = ItemFilterSet
31    # django-filter ver2.0対応 クエリ未設定時に全件表示する設定
32    strict = False
33
34    # 1ページの表示
35    paginate_by = 10
36
37    def get(self, request, **kwargs):
38        """
39        リクエスト受付
40        セッション変数の管理:一覧画面と詳細画面間の移動時に検索条件が維持されるようにする。
41        """
42
43        # 一覧画面内の遷移(GETクエリがある)ならクエリを保存する
44        if request.GET:
45            request.session['query'] = request.GET
46        # 詳細画面・登録画面からの遷移(GETクエリはない)ならクエリを復元する
47        else:
48            request.GET = request.GET.copy()
49            if 'query' in request.session.keys():
50                for key in request.session['query'].keys():
51                    request.GET[key] = request.session['query'][key]
52
53        return super().get(request, **kwargs)
54
55    def get_queryset(self):
56        q_word = self.request.GET.get('query')
57
58        if q_word:
59           object_list = Item.objects.filter(
60             Q(name__icontains = q_word) | Q(name2__icontains = q_word) |
61             Q(name3__icontains = q_word) | Q(sample_1__icontains = q_word))
62        else:
63           object_list = Item.objects.all()
64        return object_list
65
66
67    def get_context_data(self, *, object_list=None, **kwargs):
68        """
69        表示データの設定
70        """
71        # 表示データを追加したい場合は、ここでキーを追加しテンプレート上で表示する
72        # 例：kwargs['sample'] = 'sample'
73        return super().get_context_data(object_list=object_list, **kwargs)
74
75class ItemCreateView(LoginRequiredMixin, CreateView):
76    """
77    ビュー：登録画面
78    """
79    model = Item
80    form_class = ItemForm
81    success_url = reverse_lazy('index')
82
83    def form_valid(self, form):
84        """
85        登録処理
86        """
87        item = form.save(commit=False)
88        item.created_by = self.request.user
89        item.created_at = timezone.now()
90        item.updated_by = self.request.user
91        item.updated_at = timezone.now()
92        item.save()
93
94        return HttpResponseRedirect(self.success_url)
95
96
97class ItemUpdateView(LoginRequiredMixin, UpdateView):
98    """
99    ビュー：更新画面
100    """
101    model = Item
102    form_class = ItemForm
103    success_url = reverse_lazy('index')
104
105    def form_valid(self, form):
106        """
107        更新処理
108        """
109        item = form.save(commit=False)
110        item.updated_by = self.request.user
111        item.updated_at = timezone.now()
112        if request.FILES:
113                item.image = request.FILES.get('image') # 追加
114        item.save()
115
116        return HttpResponseRedirect(self.success_url)
117

html
1<form method="post" enctype="multipart/form-data">
2    {% extends "./_base.html" %}
3    {% load static %}
4    {% block content %}
5        {% load crispy_forms_tags %}
6        <div class="container-fluid bg-secondary text-white">
7          <div class ="bg-secondary text-white">  <!-- 画面上部色設定 -->
8            <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
9                <!-- 検索機能一覧設定 -->
10                <div class="modal-dialog" role="document">
11                    <div class="modal-content">
12                        <div class="modal-header">
13                            <h5 class="modal-title">検索条件</h5>
14                            <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
15                                <span aria-hidden="true">&times;</span>
16                            </button>
17                        </div>
18                        <form id="filter" method="get">
19                            <div class="modal-body">
20                                {{ filter.form|crispy }}
21                            </div>
22                        </form>
23                        <div class="modal-footer">
24                            <a class="btn btn-outline-dark" data-dismiss="modal">戻る</a>
25                            <button type="submit" class="btn btn-outline-dark" form="filter">検索</button>
26                        </div>
27                    </div>
28                </div>
29            </div>
30    
31             <!-- 新規、検索ボタン設定 -->
32    
33            <div class="row">
34                <div class="col-12">
35                    <a class="btn btn-secondary filtered" style="visibility:hidden" href="/?page=1">検索を解除</a>
36                    <div class="float-right mt-1">
37                        <a class="btn btn-dark" href="{% url 'create' %}">新規</a>
38                        <input class="btn btn-dark" data-toggle="modal" data-target="#myModal" href="#">検索</a>
39                    </div>
40                </div>
41            </div>
42    
43            <!-- ページ番号ボタン設定 -->
44    
45            <div class="row mt-3">
46                <div class="col-10 mx-auto">
47                    {% include "./_pagination.html" %}
48                </div>
49            </div>
50        </div>
51    
52       
53        <html>
54          <head>
55            <link rel="stylesheet" type="text/css" href= "{% static 'app.css' %}"> 
56          </head>
57          <body>
58              <div class="container-fluid">
59               <div class="col-12 p-3 mb-12">
60                    <ul class="list-group">
61                      {% if item_list %}
62                        {% for item in item_list %}
63                            <li class="list-group-item bg-light text-dark">　<!-- サイト表示一覧 背景色変更設定 -->
64                                {# item_detail_contents.html を参考に必要な項目を追加してください #}
65                              <div class="row">
66                                <div class="col-9">
67    
68                                  <div class ="row">
69                                    <div class="col-2 offset-2">
70                                        <p>1_ラーメン店</p>
71                                    </div>
72                                    <div class="col-4 offset-2">
73                                        <p>{{ item.name | default_if_none:"未入力" }}</p>
74                                    </div>
75                                  </div>
76                                
77                                  <div class="row">
78                                    <div class="col-2 offset-2">
79                                        <p>2_メニュー名称</p>
80                                    </div>
81                                    <div class="col-4 offset-2">
82                                        <p>{{ item.name1 | default_if_none:"未入力" }}</p>
83                                    </div>
84                                  </div>
85                       <!-- 画像表示設定 -->
86                                  <div class="col-3 clearfix">
87                                     {% if item.image %}
88                                     <p><img src ='{{item.image.url}}'class = "img-fluid" width=250 top=200></p>
89                                     {% endif %}  
90                                  </div>
91                                </div>
92    
93                               <div class="row">
94                                  <div class="col-12">
95                                    <div class="float-right">
96                                        <a class="btn btn-dark " href="{% url 'detail' item.pk %}">詳細</a>
97                                        <a class="btn btn-dark " href="{% url 'update' item.pk %}">編集</a>
98                                        <a class="btn btn-dark " href="{% url 'delete' item.pk %}">削除</a>
99                                    </div>
100                                  </div>
101                               </div>                           
102                           </li>
103                        {% endfor %}
104                      {% else %}      
105                           <li class="list-group-item">
106                                <p>対象のデータがありません</p>
107                           </li>
108                      {% endif %}
109                    </ul>
110                </div>
111            </div>
112         </body>
113        </html>
114        
115    
116         <div class ="bg-secondary text-white">
117            <div class="row mt-3">
118                <div class="col-10 mx-auto">
119                    {% include "./_pagination.html" %}
120                </div>
121            </div>
122         </div>
123          
124        </div>
125    {% endblock %}
126    </form>
127

m.ts10806

2021/05/04 20:57

画像自体のアップロードはできてるのでしょうか。

fdd

2021/05/04 23:04

はい。できています。

m.ts10806

2021/05/04 23:07

では、キャッシュではないでしょうか。画像表示のコードがないので何とも言えませんが。

fdd

2021/05/04 23:24

先ほどの質問の訂正ですが、画像のアップロードを行った際登録画面の情報を確認してみたのですが、画像のURLの情報が登録できていなかったので、アップロードはできていない状況でした。

mg_ss

2021/05/14 06:52

画像自体のアップロードは以前はできたのでしょうか。やはりブラウザのキャッシュが疑わしいと思うのですが… 一度ブラウザのキャッシュを削除してみてください。

mg_ss

2021/05/14 23:13

もう一度いいますがアップロードは以前はできたのでしょうか。もしできていないのであれば画像が表示されないのも当たり前です。前のコメントで言った通り、 *アップロードの確認 *キャッシュの削除をしてみて下さい。

fdd

2021/05/15 23:35

ms_ssさんコメントの方大変ありがとうございます。コメント返信が遅れてしまいまして申し訳ございません。キャッシュを実行した際の確認を取りましたが、やはり管理画面からの登録では、アップロード画像のURLが登録できておりホームページ内から確認が取れるのですが、ホームページ内の編集(更新処理画面)からは画像の登録は行ってもURLの登録が行えておらず、ホームページに画像は反映されませんでした。

m.ts10806

2021/05/15 23:38

「アップロードができているかできていないか」はDBに保存されているかどうかではなく、そのファイルが想定の場所（サーバー内の指定の場所）に配置できているかどうかのことを確認しています。

fdd

2021/05/16 00:06

m.ts10806さん追記のコメントありがとうございます。アップロードのファイルの件ですが、管理画面からの画像保存は可能なため、urls.pyの画像URLの登録部分のソースには問題が無いと考えています。登録処理部分の画像を抽出する処理部分のソースに問題があるのでしょうか。

m.ts10806

2021/05/16 00:21 編集

例えDBにパスが登録されても画像自体がアップロードされてないとファイルの参照はできません。「元からあるから問題ない」ではなく「確実にその存在を確認したから問題ない」としてください。問題切り分けのためには「確実に問題がないこと」を1つずつ立証していく必要があります。

fdd

2021/05/16 00:38 編集

アドバイスありがとうございます。画像のパスが登録されてても呼び出す元となる画像がDBに保存できているとは限らないという解釈で問題ないでしょうか。