Image url from an ImageField used as ForeignKey

Question

I'm trying to see an image inside a template using this tag {{ post_details.header_image.url }}. When I do this the image doesn't appear.

models.py

class ImageUpload(models.Model):
    name = models.CharField(
        max_length=50,
        )
    file = models.ImageField(
        upload_to='images/%Y/%m/%d',
        )

class BlogPost(models.Model):
    title = models.CharField(
        max_length=70,
        unique=True,
        )
    slug_post = models.SlugField(
        'Slug',
        max_length=70,
        unique=True,
        )
    contents = models.TextField(
        'Contenuti',
        blank=True,
        )
    header_image = models.ForeignKey(
        ImageUpload,
        on_delete=models.CASCADE,
        related_name="blog_header_image",
        blank=True,
        )

views.py

def singlePost(request, slug_post):
    post_details = get_object_or_404(BlogPost, slug_post=slug_post)
    context = {
        "post_details": post_details,
        }
    template = 'blog/reading/single_post.html'
    return render(request, template, context)

single_post.html

  <img src="{{ post_details.header_image.url }}" class="img-fluid" alt="{{ post_details.title }}">
  <h1>{{ post_details.title }}</h1>
  <p>{{ post_details.contents }}</p>

I can see the title and the contents but the image tag appear blank. How I can solve this problem?

Answer 1

You missed the field itself.

<img src="{{ post_details.header_image.file.url }}" ...>