Why are my images not showing at the index page?

Question

I am trying to create an auction website where the users can input an image url and bid on the entries.

The issue I am currently having is that my images are not reflecting on my index page except I hard code it.

I'm not sure what I am doing wrong as I have tried using different options such as using an imageField and trying to convert the URL to an image(This didn't work) and I have tried tweaking the codes but still having the same issue.

Please assist a newbie

URL.PY

    path("create/", views.create_listing, name="create_listing"),

MODELS.PY

class Auction(models.Model):
    ABSTRACT = 'AB'
    MODERN = 'MN'
    ILLUSTRATION = 'IN'

    select_category = [
        ('ABSTRACT', 'Abstract'),
        ('MODERN', 'Modern'),
        ('ILLUSTRATION', 'Illustration')
    ]

    title = models.CharField(max_length=25)
    description = models.TextField()
    current_bid = models.IntegerField(null=False, blank=False)
    # image_upload = models.ImageField(upload_to='images/')
    image_url = models.URLField(verbose_name="URL", max_length=255, unique=True, null=True, blank=True)
    category = models.CharField(
        choices=select_category,
        max_length=12,
        default=MODERN,
    )
    created_at = models.DateTimeField(auto_now_add=True)

FORMS.PY

class AuctionForm(forms.ModelForm):
    
    class Meta:
        model = Auction
        fields = ['title', 'description', 'current_bid', 'image_url', 'category']

VIEWS.PY

def create_listing(request):
    form = AuctionForm()
    user = request.user

    if request.method == 'POST':
        form = AuctionForm(request.POST, request.FILES)
        images = Auction.objects.get('image_url')
        if form.is_valid:
            context = {
                'user': user,
                'images': images
            }
            form.save()
            return redirect('index', context)
    else:
        form = AuctionForm()
        context = {'form': form}  
        return render(request, 'auctions/create-listing.html', context)

CREATE LISTING HTML

    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{form.as_p}}
        <input type="submit" value="Submit">
    </form>

INDEX.HTML

    <h2>Active Listings</h2>

    <a href={% url 'create_listing' %}>Add new</a>
    <main>
        <section>
            {% for listing in listings %}
            <div class="row">
                <div class="col-md-4">
                  <div class="thumbnail my-2">
                    <a href={% url 'detail' detail.id %}>

                      {% if auction.image_url %}
                        <img src={{ auction.image_url }} alt="{{ auction.title }}" style="width:100%">
                      {% else %}
                        <img src="https://demofree.sirv.com/nope-not-here.jpg">
                      {% endif %}

                      <div class="caption">
                        <p>{{ Auction.get_category_display }}</p>
                        <p>Title</p>
                        <p>Amount</p>
                      </div>
                      <div class="button">
                        <a href={% url 'listing_detail' listing_detail.pk %} class="btn btn-outline-dark btn-sm m-1">VIEW</a>
                      </div>
                    </a>
                  </div>
                </div>
            </div>
            {% endfor %}                
        </section>

Answer 1

Did you installed pillow? if not you can installed i with pip install pillow or pipenv install pillow(if you installed django using pipenv) and then you can use image_upload = models.ImageField(upload_to='images/') in your model.