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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Django

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3944閲覧

DjangonのListViewで画像を一覧表示させたいができない。

Murasaki_PurPle

総合スコア37

Django

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

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/08/21 17:24

編集2020/08/23 06:40

DjangoのListViewで画像を一覧表示させたい

Djangoを使ってブログを作成しています。その際、作成した記事を一覧で表示させたいと考えています。
その際、図が表示されるようにしたいのですが 上手くいかず困っています。

書いた記事のアイキャッチ画像が出てくれば完了なのですが...

書いたスクリプト

Django 2.2.2
Pillow 7.2.0

PurpleDiary # │ ├─ PurpleDiary # ├─ │ │ │ ├─ __init__.py # │ ├─ settings.py # │ ├─ urls.py # │ ├─ views.py # │ └─ wsgi.py # │ ├─ PurplePrivateDiary # ├─ │ │ │ ├─ migrations # │ │ ├─ __pycache__ # │ │ │ ├─ 0001_initial.cpython-36.pyc # │ │ │ ├─ 0002_blogmodel2.cpython-36.pyc # │ │ │ ├─ 0003_auto_20200820_0032.cpython-36.pyc # │ │ │ ├─ 0004_auto_20200820_2247.cpython-36.pyc # │ │ │ └─ __init__.cpython-36.pyc # │ │ │ │ │ ├─ 0001_initial.py # │ │ ├─ 0002_blogmodel2.py # │ │ ├─ 0003_auto_20200820_0032.py # │ │ ├─ 0004_auto_20200820_2247.py # │ │ └─ __init__.py # │ │ │ ├─ templates # │ │ ├─ BlogDetail.html # │ │ ├─ BlogList.html # │ │ ├─ Entrance.html # │ │ ├─ about.html # │ │ ├─ contact.html # │ │ ├─ diaryBase.html # │ │ ├─ diarySample.html # │ │ ├─ index.html # │ │ └─ menu.html # │ │ │ ├─ __init__.py # │ ├─ admin.py # │ ├─ apps.py # │ ├─ models.py # │ ├─ settingApp.py # │ ├─ tests.py # │ ├─ urls.py # │ └─ views.py # │ ├─ media # │ ├─ 367-3678882_python-logo-clipart-easy-pandas-python-logo-png.png.jpeg # │ └─ git_logo.png # │ ├─ static # │ ├─ css # │ │ ├─ Entrance.css # │ │ ├─ diary2.css # │ │ └─ diaryMdiaQuery.css # │ │ │ └─ img # │ ├─ Kingyo.jpg # │ ├─ KyotoYasaka2.jpg # │ ├─ japanGarden.jpg # │ ├─ purple.jpeg # │ ├─ wave.jpg # │ └─ wave2.jpg # │ └─ manage.py #

settings.py

python

1MEDIA_ROOT = os.path.join(BASE_DIR, "media") 2MEDIA_URL = "/media/"

urls.py

python

1from django.urls import path, include 2from django.contrib.staticfiles.urls import static 3 4from . import settings 5 6urlpatterns = [ 7 path("", include("PurplePrivateDiary.urls")), 8] 9 10#開発サーバーでメディアを配信できるように設定 11urlpatterns += static( 12 settings.MEDIA_URL, 13 docuent_root=settings.MEDIA_ROOT 14)

app/views.py

python

1from django.views.generic import TemplateView, ListView, DetailView 2from .models import BlogModel3 3 4 5class BlogList(ListView): 6 template_name = "BlogList.html" 7 model = BlogModel3 8 9class BlogDetail(DetailView): 10 template_name = "BlogDetail.html" 11 model = BlogModel3

app/model.py

python

1from django.db import models 2 3# Create your models here. 4CATEGORY = ( 5 ("python", "python"), 6 ("Django", "Django") 7) 8 9class BlogModel3(models.Model): 10 title = models.CharField(max_length=100) 11 contentDescription = models.TextField(max_length=150) 12 content = models.TextField() 13 postdate = models.DateField(auto_now_add=True) 14 updateDate = models.DateField(auto_now=True) 15 category = models.CharField( 16 max_length=50, 17 choices=CATEGORY 18 ) 19 eyeCatch = models.ImageField( 20 verbose_name="アイキャッチ画像", 21 blank=True, 22 null=True 23 ) 24 25 def __str__(self): 26 return self.title

app/templates/diaryBase.html

python

1{% load static %} 2 3<html lang="ja"> 4 5 <head> 6 <meta charset="utf-8"> 7 8 </head> 9 10 <body> 11 {% block contentsSection %}{% endblock %} 12 </body> 13 14</html>

app/templates/BlogList.html

python

1{% extends "diaryBase.html" %} 2 3{% block contentsSection %} 4 {% for item in object_list %} 5 <div class="cardPC"> 6 <div class="boxPC"> 7 <img src="{{ item.eyeCatch }}" class="imagePC"> 8 <div> 9 <p class="titlePC"> 10 <a href = "{% url 'detail' item.pk %}"> 11 {{ item.title }} 12 </a> 13 </p> 14 <span class="categoryPC">{{ item.category }}</span> 15 <p class="contentDescriptionPC">{{ item.contentDescription }}</p> 16 <span class="updateDatePC">更新日 {{ item.updateDate }}</span> 17 </div> 18 </div> 19 </div> 20 {% endfor %} 21{% endblock %}

助けてください!!

お忙しい中恐縮ですが、どうかご教示頂けますと幸いです。

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

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

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

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

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

dameo

2020/08/22 06:02

設定系の話なので、今の環境をそのまま書くのではなく、あなたが正しいと思っている設定方法で、他の人も全く同じように動かせるソースコードを新たに書いてください。練習にもなりますよ。 また、表示されないというだけでなく、表示されたHTMLをブラウザの開発者ツールで見て、実際にIMG要素のsrc属性がどうなっていて、本来のURLとどう違っているのかを確認してください。 最後に、ディレクトリ構成が気になります。 django-admin startproject project . のように最後ドットで終わるような作り方しましたか?
Murasaki_PurPle

2020/08/23 06:43

>あなたが正しいと思っている設定方法で、他の人も全く同じように動かせるソースコードを新たに書いてください。 作成中です。少々お待ちいただけないでしょうか。 >ブラウザの開発者ツールで見て、実際にIMG要素のsrc属性がどうなっていて、本来のURLとどう違っているのかを確認してください。 確認をしたところ <img src="/media/git_logo.png" class="imagePC"> のようになっておりました。上記の構成図を見ていただければ分かるとおり、おそらく問題ないと思います。 >django-admin startproject project . のように最後ドットで終わるような作り方しましたか? 初めて聞きました。 最後.で終わらせてプロジェクトを作成するのはなぜでしょうか。 追記が長くなってしまい申し訳ございません。 どうぞよろしくお願いいたします。
dameo

2020/08/23 07:53

logoは正しく表示されそうですね。そのgit_logo.pngも表示されていないのですか? > 最後.で終わらせてプロジェクトを作成するのはなぜでしょうか。 settings.pyなどがmanage.pyなどと同じフォルダに出来て、アプリケーションフォルダがその下に配置されるからです。多分趣味のようなものだと思うのですが、django rest framewrokのチュートリアルとかでそういう配置のものを見たことがあります。 あなたが配置を書かれる前の状態だと、各ファイルが settings.py app/views.py のように書かれてたので、そういう構造なのかと思った次第です。私はそう書いて作ったことがなかったので、そのときはパスの設定とかが特殊なのかもと思って、聞きました。 現状の構成の設定で気になる点は見つけられませんでした。 コードとしては、{{ item.eyeCatch }}の前に{{ MEDIA_URL }}がいるのではないかと思います。
Murasaki_PurPle

2020/08/23 08:13

>現状の構成の設定で気になる点は見つけられませんでした。 dameo様 大変恥ずかしながら、スペルミスがエラーの原因でした。 質問に答えてくださりありがとうございました。 そして、ご迷惑をおかけいたしました。
dameo

2020/08/23 09:14

解決して良かったですね。 ただ、それで解決したのであれば、表示されなかった画像は <img src="xxx.png"> のような形式だったのではないかと思うので、もしそうなら、それをきちんと説明した方がいいと思いますよ。そうでないと、後から同じ現象でココを見た人が、 <img src="/media/xxx.png"> という形式で表示できない場合に、検索パスを追加して表示できるようになったと読めてしまうので。
dameo

2020/08/23 11:22

検証環境なかったので今しがた確認したところ、↑は私の大勘違いでした。すみません。 そもそもsrc="/media/xxx.png"で表示されないことが分かりました。 表示されない原因はコメントにあるとおり、djangoはそもそもMEDIA_URL用の静的ファイル処理自体をしておらず、開発サーバ単体で処理する場合は実際のルーティン処理の一環として静的ファイル用に追加しないといけないのに、スペルミスで追加されていなかったということなんですね。 失礼しました。以前やったときはよく考えずに検索パスを追加してるんだろうと納得してて間違った理解をしていたようです。
guest

回答1

0

ベストアンサー

HTML

1<img src="{{ item.eyeCatch.url }}" class="imagePC"> 2```ではないでしょうか? 3*** 4追記 5```Python 6urlpatterns += static( 7 settings.MEDIA_URL, 8 docuent_root=settings.MEDIA_ROOT 9) 10```↓ 11```Python 12urlpatterns += static( 13 settings.MEDIA_URL, 14 document_root=settings.MEDIA_ROOT 15) 16```ですかね?

投稿2020/08/21 21:37

編集2020/08/23 07:35
ForestSeo

総合スコア2720

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

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

Murasaki_PurPle

2020/08/22 03:30

試してみましたが、それでもダメでした... 他に何か考えられることがあれば教えていただきたいです...
ForestSeo

2020/08/22 20:47

ブラウザの開発者ツール(検証)で、srcの中を見れませんか?
Murasaki_PurPle

2020/08/23 06:27

確認しました。srcの中身は <img src="/media/git_logo.png" class="imagePC"> のようになっていました。 urlは正しそう(に見える)ので、urls.pyで正しく画像のところに遷移できていないということなのでしょうか。
ForestSeo

2020/08/23 07:35

document_rootの綴りが間違ってます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問