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

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

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

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Python

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

解決済

DjangoのListViewでテンプレートに画像が表示されなく、困っております。

Mitsu_
Mitsu_

総合スコア0

Django

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Python

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

1回答

0評価

1クリップ

385閲覧

投稿2021/05/03 12:57

編集2022/01/12 10:58

DjangoのListViewでテンプレートに画像が表示されません

前提・実現したいこと

DjangoのListViewでテンプレートに画像が表示されません

発生している問題・エラーメッセージ

検証でhtmlを見たところ何故か<img>が表示されておりませんでした。

該当のソースコード

settings.py

STATIC_URL = '/static/' STATIC_ROOT =os.path.join(BASE_DIR,'staticfiles') STATICFILES_DIRS = [str(BASE_DIR / 'static')] MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/'

urls.py

from django.contrib import admin from django.urls import path, include from django.urls import path from . import settings from django.contrib.staticfiles.urls import static urlpatterns = [ path('admin/', admin.site.urls), path('account/', include('account.urls')), path('stores/', include('stores.urls')), ] if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

views.py

class ProductListView(LoginRequiredMixin, ListView): model = Products template_name = os.path.join('stores', 'product_list.html')

product_list.html

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> {% for product in object_list %} <div class="col"> <div class="card shadow-sm"> <img class="bd-placeholder-img card-img-top" width="100%" height="225" role="img" src="{product.picture.url}" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"> <div class="card-body"> <h5 class="card-title">{{ product.name }}</h5> <h3 class="card-title">{{ product.price }}円</h3> <p class="card-text">{{ product.item_description }}</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">詳しく見る</button> <button type="button" class="btn btn-sm btn-outline-secondary">買い物カゴに入れる</button> </div> </div> </div> </div> </div> {% endfor %} </div>

models.py

class Products(models.Model): name = models.CharField(max_length=50) price = models.IntegerField() item_description = models.CharField(max_length=1000) product_type = models.ForeignKey(ProductTypes, on_delete=models.CASCADE) seller_name = models.ForeignKey(SellerName, on_delete=models.CASCADE) class Meta: db_table = 'products' def __str__(self): return self.name class ProductPictures(models.Model): picture = models.FileField(upload_to='product_pictures') product = models.ForeignKey( Products, on_delete=models.CASCADE ) order = models.IntegerField() class Meta: db_table = 'product_pictures' ordering =['order'] def __str__(self): return self.product.name + ': ' + str(self.order)

イメージ説明
長文になってしまい、誠に申し訳ございません。
どうぞよろしくお願い申し上げます。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

hide5stm
hide5stm

2021/05/03 13:08

errorメッセージは出ていないでしょうか。 DBのtableで指定されたURLに対応するpathに実際の画像ファイルが配置されていないということは よくあるので、画像ファイルを配置すべき場所とURLの対応について調べることをお勧めします
Mitsu_
Mitsu_

2021/05/03 13:27

お世話になります。 Not Found: /stores/product_list/{product\.picture\.url} このようなエラーが出ておりました。 どうぞよろしくお願いいたします

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Django

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Python

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