Q&A
記述的にファイルパスが原因な気がします。
スクリーンショットでもなんでもいいので質問者さんの、
画像ファイルやhtmlなどのフォルダ階層を教えてください。
前提・実現したいこと
・プログラミング初心者ですので非常に
初歩的なミスかもしれません。
・単に画像を表示させるだけなのですが
うまくいきません。理由もわかりません。
・django2を使ったアプリケーションで
nginxを使ってサーバーにアップしてます。
＊（ 問題は反映される画像とされない画像があり、されない画像も開発環境な
ら表示される。 ）
こういう感じです。
fileA － 開発環境で表示される。本番環境でも表示される
fileB － 開発環境で表示される。本番環境で表示されない。
いろいろ試しましたがfileA以外は表示されません。sizeを変えても
容量を変えても同様です。ファイルの種類はjpgです。
＊試したこと
画像を表示するためhtml上に
<div class= "contents" style="background:url(/static/app_name/**image**)">; background-size:cover;> ............... </div>現状やろうとしたのはこれなのですが、問題部分がわからなかったので、
<img src="/static/app_name/**image**" class="img-fluid" alt="Responsive image"> とか {% load static %} <img src={% '/static/app_name/**image**' %} style='auto'> とか <img src='/static/app_name/**image**' alt= 'Response'>という風にいろいろと試したのですが、どれも同様の現象です。
原因はテンプレートか画像ファイルかと勝手に思ってViewsやsettingsの
コードは載せていません。
どなたか思い当たる節のあるかた教えていただけないでしょうか？
<img src="/static/blog/dog_1.jpg" class="img-fluid"
alt="Responsive image">
こちらが表示されるコードとファイルです。
<img src="/static/blog/dog_3.jpg" class="img-fluid"
alt="Responsive image">
こちらが表示されないコードとファイルです。
Bob_100.jpg dog-2785074_960_720.jpg hey_dog.jpg
Bob_3.jpg dog_1.jpg taro.jpg
こちらがディレクトリ内のファイルです。
このファイルはすべて開発環境では表示されます。
入力ミスもあると思い、ファイルの上書きも、コードを削除して、
すべてコピーも試しました。
home/djangoproject/app_name/static/app_name/jpg_failes
これがファイルの置いてあるディレクトリへのpathです。
path以外は書いてあるものそのままコピペしてます。
htmlは
home/djangoproject/app_name/templates/app_name/files.html
です。書き忘れてすいません。
アップしたサーバーの指定場所に、実際に画像があるかどうかは確認済ですか？
また、CSSの設定によっては高さ等が確保されず、表示されない場合も考えられますので、classを付与せず＜img＞のみで表示されますか？
症状が再現されるHTML・CSSコードやURL等を提示されると良いかと思います。
プログラミングの知識が乏しく確認の仕方がわかってないかもしれません。
上のディレクトリへのパスはサーバーでlsコマンドで確認時にアンカーポイントのディレクトリ内にファイルがあることを確認できているパスですので、置き場所が間違っているとすれば、dog_3.jpgのファイルがみれない＝ dog_1.jpgのファイルもみれないはずだと思うのですが現状はdog_1は見れるが dog_3.jpgを含む他はすべて表示されないので、jpgのファイルを小さいサイズのものや容量の小さいものなどを用意してみたのですがすべて表示されない。という風に確認しています。こんな原始的な方法しか思いつかないのですが何かいい方法がありますでしょうか？
今は単調なページに画像が添付できるかどうかを試し始めたところなので上のようにシンプルに
画像を表示させるコードしか書いていません。なので、ｃｓｓファイルも画像に関わるhtmlもこれ以外ないです。
すいません、サーバーの階層をツリー構造で表示できるのしりませんでした。
さっきわかったので遅いですが貼ります。間違ってるところご教授いただければ幸いです。
/home/jack/project/blog
|--__init__.py
|--__pycache__
| |--__init__.cpython-36.pyc
| |--admin.cpython-36.pyc
| |--apps.cpython-36.pyc
| |--context_processors.cpython-36.pyc
| |--forms.cpython-36.pyc
| |--models.cpython-36.pyc
| |--urls.cpython-36.pyc
| |--views.cpython-36.pyc
|--admin.py
|--apps.py
|--context_processors.py
|--forms.py
|--migrations
| |--0001_initial.py
| |--0002_comment.py
| |--__init__.py
| |--__pycache__
| | |--0001_initial.cpython-36.pyc
| | |--0002_comment.cpython-36.pyc
| | |--__init__.cpython-36.pyc
|--models.py
|--static
| |--blog
| | |--Bob_100.jpg
| | |--Bob_3.jpg
| | |--dog-2785074_960_720.jpg
| | |--dog_1.jpg
| | |--dog_15.jpg
|--templates
| |--admin
| | |--base_site.html
| |--blog
| | |--base.html
| | |--comment_form.html
| | |--page.html
| | |--post_detail.html
| | |--post_list.html
|--templatetags
| |--__pycache__
| | |--mytag.cpython-36.pyc
| |--mytag.py
|--tests.py
|--urls.py
|--views.py
「Bob_3.jpg」はありますが、「dog_3.jpg」は無いように見えるのですが、記述間違いでしょうか？
すいません、ややこしいですがtree表示したときには、またファイルを抜いたり
入れたりしているので、前のコメントと少し違います。tree表示する前のディレクトリ内の
ファイルはこれでした。
Bob_100.jpg dog-2785074_960_720.jpg hey_dog.jpg
Bob_3.jpg dog_1.jpg taro.jpg
ただ、その後にこのフォルダから dog_1.jpgを抜いたところ、まだ画像が表示されています。
なので、どこから読み込んでいるのかわからないのですが、dog_1.jpgだけは、あのパスで
どこか別のどこかから読み込んでいるみたいです。やはり単純にファイルの置き場所が悪いかパスミスだと思います。お騒がせしてすみませんでした。
ただ、テスト環境だとこの仕様とコードで表示できるので、本番環境との違いが何なのかよくわかりません。とりあえず単純に表示するにあたって、上の構造やコードに問題がありましたら、ご指摘、ご教授いただければ修正したいです。
確認不足で質問投げかけてすいませんでした。
何度もすいません、dog_3とBob_3は記述間違いです。
＞dog_1.jpgを抜いたところ、まだ画像が表示されています。 → 「キャッシュクリア」はされていますか？
対応ありがとうございます。
キャッシュクリアをしらなかったのでしてなかったです。
一応調べてやってみたのですが、あってるかどうかわからないです。
自分でわかる範囲の情報です。
＜キャッシュクリア前の情報＞
total used free shared buff/cache available
Mem: 992 114 273 41 604 613
Swap: 4095 69 4026
＜キャッシュクリア後の情報＞
total used free shared buff/cache available
Mem: 992 120 765 41 105 716
Swap: 4095 69 4026
減ってるので、できたのかなと判断しました。
dog_1.jpgを抜いた状態からキャッシュクリア
してみましたがブラウザの情報は変わってないです。
すいません、情報の部分がなんか見にくくなってしまいました。
buff/cacheの部分は (604) ～ (105) になりました。
閲覧しているブラウザのキャッシュはクリア済でしょうか？
ブラウザのキャッシュはできています。
前のコメントの分のデータは
ページキャッシュとslabキャッシュです。
回答4件
0
可能性の高そうな順に
- サイトルートパスからの画像フォルダの場所が違う
（テストは/static/app_name/imageが本番では/imageみたいな）
- サイズやエンコードの問題で画像のアップロードに失敗している
- 大文字小文字を区別するかしないかが本番とテストのサーバーで違う
- 濁点や発音記号を含んだファイル名がいて本番とテストで扱いが違う
- アップロード時に画像ファイル名に補正がかかっている（半角スペースが_になるとか）
投稿2019/01/17 07:55
総合スコア7804
(1) テストで作ったものを本番にアップロードしてるので、そうなる可能性はないようにおもいます。一応確認してますがlsコマンドで表示されるファイルとHTMLの入力パスは一致しています。
(2)サイズは同じものや小さいものを用意してためしました。エンコードも確認しましたが問題なさそうです。例えばファイルをサーバー送信したときに壊れていてそれを確認する方法とかあるのでしょうか？
(3),(4),(5) dog_1とdog_3という風に試してますが、1は表示される、3は表示されないなので
理由がわからず困ってます。テストではすべて表示されます。
0
単純にファイルを置いてないか、場所を間違っているんじゃないですか？
http://example.com/static/app_name/image/fileA
とか直接URL指定して、ちゃんとアクセス出来るか確認して下さい。
投稿2019/01/17 06:33
総合スコア5405
すいません、そんな方法があるのはしらなかったです。それはブラウザからサイトURL/ サーバーのホームからファイルへのpathでいいのでしょうか？やってみたのですが、アクセスできなかったです。
0
自己解決
解決しました。
結局、詳しいことはわからないのですが、collectstaticコマンドで
staticファイルを更新する度、var/www配下に集めないとだめみたいなのですが
その作業をはじめにやったっきりでした。
投稿2019/01/28 05:33
総合スコア10
あなたの回答
tips
プレビュー
