画像を表示したい

Question

少し問題があります。私は画像をアップロードして表示することができるdjangoアプリが欲しいです。現在、画像をアップロードすることはできますが、その画像を表示することはできません。

たとえば、{{comment.photo}}はC:/Users/AQUIL/Desktop/myproject/images/P1000992.JPGのパスを出力します。しかし、私は画面上にその画像を見たい。パスではありません。イメージを画面に印刷するにはどうしたらいいですか？

ここには役立つ情報があります。

models.py

class Comment(models.Model): 
    name = models.CharField(max_length = 40) 
    datetime = models.DateTimeField(default=datetime.now) 
    photo = models.ImageField(upload_to='C:/Users/AQUIL/Desktop/myproject/media/images', blank=True, null=True) 
    note = models.TextField() 
    def __unicode__(self): 
     return unicode(self.name) 

views.py

def home(request): 
    comments = None 
    try: 
     comments = Comment.objects.order_by('-datetime') 
    except: 
     return HttpResponseNotFound() 
    return render_to_response('home.html', {'comments':comments}, context_instance=RequestContext(request)) 


def add_notes(request): 
    comments = Comment.objects.all() 
    if request.method == 'POST': 
     form = CommentForm(request.POST or None, request.FILES) 
     if form.is_valid(): 
      comments.datetime = datetime.now() 
      form.save(True) 
      return HttpResponseRedirect(reverse(home)) 
    else: 
     form = CommentForm() 
    return render_to_response('form.html', {'form':form,'comments':comments}, context_instance = RequestContext(request)) 

home.html

{% extends "base.html" %} 

    {% block content %} 

    <H2>List of Comments</H2> 
    <div style="overflow:auto;padding: 10px; border:1px solid black; height:150px; width:700px;"> 

     {% for comment in comments %} 
      {{comment.photo}} <br/> 
      <b>Posted by: {{ comment.name }} Date: {{ comment.datetime.date }} Time: {{comment.datetime.time}}</b><br/> 
      <div style="font-size:125%">{{ comment.note }}</div><br/> 
     {% endfor %} 
     </div> 
    {% endblock %} 

form.html

{% extends "base.html" %}  
{% block content %} 

<h3>Add Notes</h3> 
    <form enctype="multipart/form-data" action="" method="POST"> 

{% csrf_token %} 
     <table> 
     {{form.as_table}} 
<br/> 
     </table> 

    <input type="submit" value="Save" STYLE="background-color:#E8E8E8; color:#181818 "/> 
    </form> 


{% endblock %} 

Answer 1

{% if comment.photo %} <img src="{{ comment.photo.url }}" alt="Photo" /> {% endif %} 

でサンプルを参照してください。

Answer 2

むしろ、その後{{comment.photo}}

使用{{comment.photo.url}}

は正しく画像をアップロードする方法を参照してくださいジェフリーさんのコメントdocs

Answer 3

のImageFieldのアップロードパラメータは、ローカルパスでなければなりませんので、交換してください：

photo = models.ImageField(upload_to='C:/Users/AQUIL/Desktop/myproject/media/images', blank=True, null=True) 

によって：

MEDIA_ROOT = 'C:/Users/AQUIL/Desktop/myproject/media/' 

：

photo = models.ImageField(upload_to='images', blank=True, null=True) 

が続いとしてsettings.pyでMEDIA_ROOTを設定します

最後に、あなたの画像「myImage.png」は

にアクセスします。

C:/Users/AQUIL/Desktop/myproject/media/images/myImage.png 

そして、このタグは、イメージをロードする必要があります。

<img src="/media/images/myImage.png" alt=""/> 

はする必要がありますsettings.pyであなたのMEDIA_URLに依存：

MEDIA_URL = '/media/'