質問をすることでしか得られない、回答やアドバイスがある。

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

ただいまの
回答率

87.37%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 524

score 95

djangoの初心者です。
どなたかご教授頂ければ幸いです。

やりたいことはデータベースから値を辞書型で取り出してtemplate側で画像を表示することです。
querysetで取り出して画像を表示するのは下記のサイトを参考にしてできたのですが、今後作成する機能なども考え、
辞書型で管理したいと思っているのですが、画像が表示されません。
どなたかご教授願えませんでしょうか。
※参考サイト■https://djangobrothers.com/tutorials/photo_app/imagefield/

参考サイトの通り下記のように記述する事で画像が表示できております。

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'                                                            
urlpatterns = [                                                 
    path('admin/', admin.site.urls),                            
    path('app/',include('app.urls')),
]         
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
app_name = 'app'
    path('', views.index, name='index'),
    path('management/<int:pk>/', views.management, name='management'),
] 
def index(request):
    propertys = Property.objects.all().order_by('-create_date')
    context = {
        'propertys': propertys
    }
    return render(request, 'app/index.html', context)
{% for property in propertys %}
    <img src="{{ property.image.url }}" class="photo-img">
{% endfor %}


この時取得できているURLは下記の通りでした。

http://127.0.0.1:8888/media/property/django_cafe.jpg


これを辞書型で取得しようと下記のように変更いたしました。

#.valuesを追記
def index(request):
    propertys = Property.objects.all().values().order_by('-create_date')
    context = {
        'propertys': propertys
    }
    return render(request, 'app/index.html', context)


上記の状態だと画像が表示されませんでした。
なのでchromeのディベロッパツールで調べたところsrcの指定は下記の通りunknownでした。

<img src(unknown) class="photo-img">


unknownとなってしまうので.urlをとって「property.image」の中身を確認してみる為
下記の通りに変更してみました。

{% for property in propertys %}
    <img src="{{ property.image }}" class="photo-img">
{% 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からできるのでしょうか。
どなたかご教授頂ければ幸いです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

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ファイルのパス』と指定してあげることで
辞書型で渡しても写真が表示されるようになりました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る