Django/html issue with displaying/linking image-CodePudding

I'm making a site by using django. One of my models contains ImageField. Files are saved in main_dir/media/images. I'd like to display specific images in templates but I can't achieve it. Instead of photo, I can see only default image icon which mean ( i guess ) that image is not found

settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

models


class Gallery(models.Model):
    name = models.CharField(max_length=200)
    author = models.ForeignKey(User, on_delete=models.CASCADE, default=None, null=True, blank=True)
    date_posted = models.DateTimeField(auto_now_add = True)

    def __str__(self):
        return self.name

class Photo(models.Model):
    gallery = models.ForeignKey(Gallery, on_delete=models.CASCADE, default=None, related_name='photos')
    name = models.CharField(max_length=200)
    description = models.TextField(blank=False)
    image = models.ImageField(blank=True, upload_to='images')

views

def gallery(request, pk):
    gallery_object = Gallery.objects.get(id=pk)

    context = {'gallery':gallery_object}
    return render(request, 'Gallery/gallery.html', context)

html

<!DOCTYPE html>
{% extends 'base.html' %}
{% block content %}
    <h1>Gallery: {{ gallery.name }}</h1>

    {% for photo in gallery.photos.all %}
        <img src="{{photo.image.url}}">
        <a>{{photo.image.url}}</a> #it's here only to check if path is correct
    {% endfor %}



    <a href="{% url 'home' %}">Go back to home page</a>
    
{% endblock content %}

what should I change to display image correctly ?

CodePudding user response：

you need to change the .get to .filter with the same condition to get multiple objects because get will return 1 object only and you cant do the for loop in the template

CodePudding user response：

There are a few things wrong. First of all, if you want to return multiple images then you have to use .filter() instead of .get() and if you are .get() instead of the filter then you don't have to loop over it as it is giving a single object. And the image is stored in Photos model and for that you will have to call that instead of gallery.

Here is how you can fix it: For single object: views function: def gallery(request, pk): gallery_object = Photos.objects.get(id=pk)

    context = {'photo': photo_object}
    return render(request, 'Gallery/gallery.html', context)

HTML template:

<!DOCTYPE html>
{% extends 'base.html' %}
{% block content %}
    <h1>Gallery: {{ photo.name }}</h1>

    
        <img src="{{photo.image.url}}">
        <a>{{photo.image.url}}</a> #it's here only to check if path is correct
    



    <a href="{% url 'home' %}">Go back to home page</a>
    
{% endblock content %}

For returning multiple objects:

views function:

def gallery(request, pk):
    gallery_object = Photos.objects.filter(#your query)

    context = {'photos': photo_object}
    return render(request, 'Gallery/gallery.html', context)

HTML:

<!DOCTYPE html>
{% extends 'base.html' %}
{% block content %}
    

    {% for photo in photos %}
        <h1>Gallery: {{ photo.name }}</h1>
        <img src="{{photo.image.url}}">
        <a>{{photo.image.url}}</a> #it's here only to check if path is correct
    {% endfor %}



    <a href="{% url 'home' %}">Go back to home page</a>
    
{% endblock content %}