djangoの初心者です。
どなたかご教授頂ければ幸いです。
やりたいことはデータベースから値を辞書型で取り出してtemplate側で画像を表示することです。
querysetで取り出して画像を表示するのは下記のサイトを参考にしてできたのですが、今後作成する機能なども考え、
辞書型で管理したいと思っているのですが、画像が表示されません。
どなたかご教授願えませんでしょうか。
※参考サイト■https://djangobrothers.com/tutorials/photo_app/imagefield/
参考サイトの通り下記のように記述する事で画像が表示できております。
settings
1MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 2MEDIA_URL = '/media/'
urls
1urlpatterns = [ 2 path('admin/', admin.site.urls), 3 path('app/',include('app.urls')), 4] 5urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urls
1app_name = 'app' 2 path('', views.index, name='index'), 3 path('management/<int:pk>/', views.management, name='management'), 4]
views
1def index(request): 2 propertys = Property.objects.all().order_by('-create_date') 3 context = { 4 'propertys': propertys 5 } 6 return render(request, 'app/index.html', context)
templates
1{% for property in propertys %} 2 <img src="{{ property.image.url }}" class="photo-img"> 3{% endfor %}
この時取得できているURLは下記の通りでした。
http://127.0.0.1:8888/media/property/django_cafe.jpg
これを辞書型で取得しようと下記のように変更いたしました。
views
1#.valuesを追記 2def index(request): 3 propertys = Property.objects.all().values().order_by('-create_date') 4 context = { 5 'propertys': propertys 6 } 7 return render(request, 'app/index.html', context)
上記の状態だと画像が表示されませんでした。
なのでchromeのディベロッパツールで調べたところsrcの指定は下記の通りunknownでした。
<img src(unknown) class="photo-img">
unknownとなってしまうので.urlをとって「property.image」の中身を確認してみる為
下記の通りに変更してみました。
templates
1{% for property in propertys %} 2 <img src="{{ property.image }}" class="photo-img"> 3{% endfor %}
この状態では画像は表示されませんが「画像のアドレスをコピー」でパスを確認したところ下記の通りでした。
http://127.0.0.1:8888/app/property/django_cafe.jpg
この状態で分かっていることは、辞書型で.urlが効かなくなる事、それに伴ってMEDIA_URLのパスが付与去れなくなる事程度です。
こちらの「http://127.0.0.1:8888/app/property/django_cafe.jpg」のうちの「app/」の部分は違うページで試してみると「management/int:pk/」などに代わることからurlsで生成されている部分というのはわかったので、この部分をmediaに変更できればうまく画像が表示されるのではないかと思っているのですが、この「app/」や「management/int:pk/」は、いつ画像のアドレスに付与されているのでしょうか。またこれらのパスを「media/」に変更するにはsettingsからできるのでしょうか。
どなたかご教授頂ければ幸いです。
以上ご回答の程よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。