Django - Qiita上のtutorial appを概観し、機能をプラスする（１）

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

#まずは画像ファイルの保管、受取先を指定します。最終行当たりに追加。
#MEDIA_ROOT:projectと同じ階層にmediaフォルダがある
#MEDIA_URL:(Djangoでは画像ファイルに1対1でURLが対応するため)メディアファイル公開時のURL指定です。

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
#メディアファイル公開用のURLを追加します。最終行当たりに追加。

class ItemForm(forms.ModelForm):

    class Meta:
        model = Item
        fields = ('name','age','sex','memo','images')
        widgets = {
                    'name': forms.TextInput(attrs={'placeholder':'記入例：山田　太郎'}),
                    'age': forms.NumberInput(attrs={'min':1}),
                    'sex': forms.RadioSelect(),
                    'memo': forms.Textarea(attrs={'rows':4}),
                    'images': forms.ClearableFileInput(attrs={'multiple': False}),
                  }
                  #imagesを追加します。これによりメディアファイルをデータベース化し、'images'として引き出すことができるようになりました。

    images = models.ImageField(
        verbose_name='画像ファイル',
        upload_to='',
        default='defo.png'
    )
    #class Item(models.Model):に追加。upload_to=''でsettings.py上に書いた保存先が指定される。
    #defaultにメディアファイルをアップロードしていないときに表示する画像を指定します。mediaフォルダ下にdefo.pngを配置。

                    <!--一覧において画像を表示したい-->
                    <div class="row">
                        <div class="col-3">
                            <p>画像</p>
                        </div>
                        <div class="col-9">
                            <img src="{{ item.images.url }}" width=150>
                        </div>
                    </div>
                    <!--同階層に並ぶ名前、登録日の下に追加します。-->
                    <!--Djangoではサーバー側のデータを引き出すときに{{}}や{%%}で囲むことでディレクトリを指定したりします。-->

<div class="row">
    <div class="col-3">
        <p>画像ファイル</p>
    </div>
    <div class="col-9">
        <form method="post" enctype="multipart/form-data">
            <!--入力した画像を表示させたい-->
            <img src="{{ object.images.url }}" width=300>
        </form>
        {{ form.media }}
    </div>
</div>
<!--項目名:備考の上に追加します。-->

    <div class="row">
        <div class="col-12">
            <!-- enctype=...の追加-->
            <form method="post" id="myform" enctype="multipart/form-data">
                {% crispy form%}
            </form>
        </div>
    </div>
<!--{%crispy form%}にメディアファイルを含むデータが格納されてますので、enctypeを指定する必要があります。-->
<!-- なおcrispyについて詳しくは省きますが、crispy_forms appにより入力項目をきれいに整理してくれます。-->