django updateviewで画像が表示されない

概要

djangoでユーザープロフィール情報を作成しています。
メールとpwにて新規アカウント作成後、デフォルト画像を設定しておき、後からユーザーが任意で画像を変えられるようにする。
そんな仕組みです。
そこで、UpdateViewを用いて画像を任意で変えられることはうまくいっているのですが、
デフォルトの画像がうまく表示されません。
ビュー側の問題なのか、フォーム側の問題なのか、テンプレート側の問題なのか......。
解決策がお分かりになる方、お力添え願いたいです。

現状

周辺コード

update.html

{% extends "base.html" %}

{% block content %}

<title>pairnite(仮称)</title>
</head>
<body>
  <h1>ここは詳細プロフィール登録ページです。</h1>
  <h3>1分で登録（無料）</h3>
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
  <button type="submit" class="btn btn-primary">登録</button>
  </form>


{% endblock %}

views.py

class ProfileUpdateView(UpdateView):
    '''
    プロフィール情報の更新

    自分のプロフィールのみ編集可能
    '''
    model = Profile
    template_name = "users/update.html"
    form_class = ProfileForm
    success_url = reverse_lazy("users:home")

forms.py

class ProfileForm(forms.ModelForm):
    user_name = forms.CharField(required=True)
    CHOICES = (
        ('female', '女の子',),
        ('male', '男の子',),
        ('not_applicable', 'ひみつ',)
    )
    gender = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES, required=True)

    age = forms.IntegerField(required=False)

    CHOICES2 = (
        ('PS4', 'PS4',),
        ('PC', 'PC',),
        ('swich', 'swich',),
        ('xbox', 'xbox',),
        ('mobile', 'スマホ',)
    )
    game_device = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES2, required=False)

    CHOICES3 = (
        ('OK', 'できる'),
        ('Friend', '仲良くなってから'),
        ('Listen_only', '聞き専',),
        ('TIME', '時間による',),
        ('NG', 'できない',)
    )
    voice = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES3, required=False)

    CHOICES4 = (
        ('discode', 'discode'),
        ('line', 'line'),
        ('skype', 'skype',),
        ('kakao', 'カカオトーク',),
        ('NG', 'できない',)
    )
    voice_device = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES4, required=False)

    CHOICES5 = (
        ('gati', 'ガチ'),
        ('enjoy', 'エンジョイ'),
        ('which', 'どちらでも',),
    )
    play_style = forms.MultipleChoiceField(widget=forms.CheckboxSelectMultiple, choices=CHOICES5, required=False)

    CHOICES6 = (
        ('1', '1 はじめて'),
        ('2', '2 苦手'),
        ('3', '3 普通'),
        ('4', '4 得意',),
        ('5', '5 職人',)
    )
    craft_level = forms.ChoiceField(widget=forms.RadioSelect, choices=CHOICES6, required=False)

    one_message = forms.CharField(max_length=200)

    # 後で追加情報追記
    class Meta:
        model = Profile
        fields = (
            'user_name', 'icon', 'gender', 'age', 'game_device', 'voice', 'voice_device', 'play_style', 'play_time',
            'craft_level', 'one_message')

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

回答1件

ベストアンサー

UpdateViewでは、デフォルトでは画像は表示されず、
URLしか表示されません。
----追記欄----
こんな感じにいけませんか？
widget_tweaksを使い、
インストール

pip install django-widget-tweaks
```settings.py の INSTALLED_APPS に追加
```Python
INSTALLED_APPS = [
    "django.contrib.admin",
    ・・・
    "widget_tweaks", # 追加
]

HTML
1{% load widget_tweaks %}
2<form method="post" ・・・enctype="multipart/form-data">
3  <label for="load">
4    <img src="{{request.user.image.url}}" alt="" id="preview">
5    <div style="display:none;">{% render_field form.image id="load" %}</div>
6  </label>
7</form>
8<!-- jsを使う -->
9<script type="text/javascript">
10  function preview_image(obj) {
11    var fileReader = new FileReader();
12    fileReader.onload = (function() {
13      document.getElementById("preview").src = fileReader.result;
14    });
15    fileReader.readAsDataURL(obj.files[0]);
16  }
17</script>
18

投稿2020/06/06 23:25

編集2020/06/08 09:02

ForestSeo

総合スコア2722

ForestSeo

2020/06/06 23:28

request.user.icon.urlのimgをHTMLで入れて、現在の画像を表示するなどをしなくてはいけません。

tonytony

2020/06/06 23:38

ありがとうございます！ということは、 {{ form.as_p }}ではなく個別でフォーム表示させるべきってことですね！

ForestSeo

2020/06/07 01:00

追記しました。現在: ~ 変更: ~ みたいなのが残ってしまうと思いますので。

tonytony

2020/06/07 22:44

まさにもやりたいことでした！ありがとうございます！初心者的な質問で申し訳ないのですが、「重ねて記述する」というのは続けて書くようなイメージでしょうか。下記のように書いてみたのですが、うまく表示されず。。 <div style="display: none;"> {{form.icon}} </div> <img src="{{request.user.icon.url}}" alt="">

ForestSeo

2020/06/08 00:11 編集

回答をいろいろ編集したので見てください

ForestSeo

2020/06/08 00:18 編集

label の for を使えばいけるかも

tonytony

2020/06/08 22:44

ご丁寧にありがとうございます！！ javascriptの知識がなく、見様見真似で導入したのですが、上手く動きませんね。。 <title>pairnite(仮称)</title> </head> <body> <h1>ここは詳細プロフィール登録ページです。</h1> <h3>1分で登録（無料）</h3> <form method="post" enctype="multipart/form-data"> <label for="load"> <img src="{{request.user.image.url}}" alt="" id="preview"> <div style="display:none;">{% render_field form.image id="load" %}</div> </label> </form> <form method="post" enctype="multipart/form-data"> {% csrf_token %} {{ form.as_p }} <button type="submit" class="btn btn-primary">登録</button> </form> <script type="text/javascript"> function preview_image(obj) { var fileReader = new FileReader(); fileReader.onload = (function() { document.getElementById("preview").src = fileReader.result; }); fileReader.readAsDataURL(obj.files[0]); } </script> {% endblock %}

ForestSeo

2020/06/08 22:57 編集

あつすみません。 {% render_field form.image id="load" onChange="preview_image(this);" %} でした。エラーとかは出てませんか？

tonytony

2020/06/08 23:01

ありがとうございます！エラーは出ておりませんが、表示もされない、といった具合です。 {% render_field form.image id="load" onChange="preview_image(this);" %} こちらはどこと入れ替えるものでしょう。。。？

ForestSeo

2020/06/08 23:02

{% render_field form.image id="load" %} を {% render_field form.image id="load" onChange="preview_image(this);" %} にしてみてください。

tonytony

2020/06/08 23:36

やってみました！やはり何も変わらないままですね。。。

ForestSeo

2020/06/09 09:03 編集

返信遅くてすみません。 <form method="post" enctype="multipart/form-data"> を <form method="post" action="あなたのURL" enctype="multipart/form-data"> ですね。urls.py が分からないので、分かりませんが、updateのページのURLを入れてください。例: action="{% url 'update' %}" ちなみに自分のところでは出来ました。 urls.pyを見せて頂けば..

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