Django display a photo from a model
<p>I've tried several of methods on how to retrieve an image from a model with no luck, this is where I'm at so far. I'd like to have the image show and when the user clicks on it, it opens a modal showing a projects detail.</p>

<p>models.py</p>

<pre><code>class Project(models.Model):
   author = models.ForeignKey('auth.User')
   title = models.CharField(max_length=200)
   client = models.CharField(max_length=200)
   date = models.DateField(timezone.now())
   service = models.CharField(max_length=200)
   info = models.TextField()
   photo = models.ImageField(upload_to='ports/static/img/',
                          default='ports/static/img/port_photo.png',
                          height_field='photo_height',
                          width_field='photo_width',)
   photo_height = models.PositiveIntegerField(blank=True, default=900)
   photo_width = models.PositiveIntegerField(blank=True, default=650)
   created_date = models.DateTimeField(
    default=timezone.now)
   published_date = models.DateTimeField(
    blank=True, null=True)
</code></pre>

<p><br></p>

<p>index.html</p>

<pre><code>&lt;section id="portfolio"&gt;
    {% for project in projects %}
        &lt;div class="row"&gt;
            &lt;div class="col-lg-12 text-center"&gt;
                &lt;h2&gt;Portfolio&lt;/h2&gt;
                &lt;hr class="star-primary"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-sm-4 portfolio-item"&gt;
                &lt;a href="#portfolioModal1" class="portfolio-link" data-toggle="modal"&gt;
                    &lt;div class="caption"&gt;
                        &lt;div class="caption-content"&gt;
                            &lt;i class="fa fa-search-plus fa-3x"&gt;&lt;/i&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;img src="{{ projects.photo.url }}" class="img-responsive" alt=""&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    {% endfor %}
&lt;/section&gt;
</code></pre>

<p>views.py</p>

<pre><code>from django.shortcuts import render
from .forms import ContactForm
from django.utils import timezone
from .models import Project
# Create your views here.


def index(request):
    form_class = ContactForm
    projects = Project.objects.filter(published_date__lte=timezone.now()).order_by('-published_date')
    return render(request, 'ports/index.html', {'form': form_class, 'projects': projects})
</code></pre>

<p>Look at your <code>img</code> tag. In the src attribute, you are using <code>{{ projects.photo.url }}</code>. So, you cannot get image from a queryset, you can only do so from an object of <code>Project</code> model. Use <code>{{ project.photo.url }}</code></p>

python django