🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Q&A

解決済

1回答

421閲覧

djangoで辞書型でimgパスを取り出して画像を表示したい

退会済みユーザー

退会済みユーザー

総合スコア0

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

0グッド

0クリップ

投稿2019/10/15 15:57

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からできるのでしょうか。
どなたかご教授頂ければ幸いです。

以上ご回答の程よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下記のようにすることで解決いたしました。

【settingsファイルに下記を記載】
MEDIA_URL = '/media/'

【viewsファイルに下記を記載】
context = {
'media_url': settings.MEDIA_URL,
'propertys': propertys,
}

【templatesファイルに下記を記載】
<img src="{{ media_url }}{{ property.image }}" class="photo-img">

上記のようにtemplatesで『/media/ + imageファイルのパス』と指定してあげることで
辞書型で渡しても写真が表示されるようになりました。

投稿2019/10/28 01:34

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問