画像が割れた

-2

画像が壊れています。私は、photo.htmlに書い画像が割れた

{% extends "registration/accounts/base.html" %} 
    {% block content %} 
    <div class="container"> 
     <h2 class="page-header">{{ photos.title }}</h2> 
     <div class="row"> 
     <div class="col-xs-4"> 
      <img class="img-responsive" src="/media/{{ photos.image }}"> 
     </div> 
     </div> 
     <a class="btn btn-primary" href="{% url 'accounts:upload' photo.id %}">UPLOAD</a> 
    </div> 
{% endblock %}

私はそれを修正することができwhy.How私は知らないのですか？ "img tag"は間違っていますか？

「ひび割れ」の意味は、

出典

2017-02-06 lili

あなた 'クラスは= "IMG応答性"'の多分その原因：あなたは画像のURL photo.image.urlを使用する必要がありますか？ –

ひび割れの意味は？ –

@ZagorodniyOlexiy thx、ur comments。だから、私はそれを修正するために何をすべきですか？ – lili

のようなものですDOMの準備ができたときに生成された画像のURLを確認してください。

壊れた画像アイコンをクリックします。
右クリック>要素の検査
URLを確認してください。

urlが正しい場合。画像がロードされているかどうかを確認するには、ネットワーク要求パネルを確認してください。

これらの画像は若干の誤りがある可能性があります。画像がサーバー..またはCORSの問題に見つかりません。

出典

2017-02-06 13:22:04

thx ur comments.私はURLをチェックしたので、srcが間違っているとわかりました。イメージはイメージ（子のアプリ名）/ imagesにありますので、ディレクトリを指定したいと思いますが、その方法はわかりません。私に方法を教えてください。 – lili

didn;フォルダ構造を正確に取得することはできますが、srcの前に '../'を使用すると、 'src =" ../media/ {{photos.image}} " –

あなたのHTMLマークアップは次のようになります。

<img class="img-responsive" src="photo.image.url">

出典

2017-02-06 13:22:10

photos.imageは、画像ファイルそのものではなく、画像へのURLを参照しています。

<img class="img-responsive" src="{{ photos.image.url }}">

出典

2017-02-06 13:33:28

答えて

関連する問題