How to display image? Django

Question

I've tried inserting "static" in the tag but doesnt return the image. Rather it returns a white box. Users are able to upload their own pictures. The directory where this is stored is Aviation -> Uploads -> Aircraft. Where exactly am I going wrong?

list.html

<div class="box"><img src="{{ aircraft.image }}" />

Settings. py

STATIC_URL = '/static/'
STATICFILES_DIRS = [ map_path('static'),]

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

View.py

def list_aircraft(request):
  aircraft = Aircraft.objects.all()
  favorited_aircraft_ids = None

  if request.user.is_authenticated():
    favorited_aircraft_ids = list(FavoritedAircraft.objects.filter(user__id=request.user.id).values_list('id', flat=True))
    print (favorited_aircraft_ids)

  return render(request, 'aircraft/aircraft_list.html', {
    'aircraft': aircraft,
    'favorited_aircraft_ids': favorited_aircraft_ids,
  })

Model.py

class Aircraft(AircraftModelBase):
    manufacturer = SortableForeignKey(Manufacturer)
    aircraft_type = SortableForeignKey(AircraftType)
    body = SortableForeignKey(Body)
    engines = models.PositiveSmallIntegerField(default=1)
    image = models.ImageField(upload_to="uploads/aircraft", blank=True, null=True)
    cost = models.DecimalField(max_digits=8, decimal_places=3)
    maximum_range = models.PositiveSmallIntegerField()
    passengers = models.PositiveSmallIntegerField()
    maximum_altitude = models.PositiveIntegerField()
    cruising_speed = models.PositiveIntegerField()
    fuel_capacity = models.DecimalField(max_digits=6, decimal_places=2)
    description = models.TextField()
    wing_span = models.PositiveSmallIntegerField(default=1)
    length = models.PositiveSmallIntegerField(default=1)

Nazkter · Accepted Answer · 2017-03-27 21:18:19Z

1

aircraft is a queryset (it could be lots of Aircraft objects)

aircraft = Aircraft.objects.all()

You must to iterate (in your template) over this queryset to access the real object, something like:

{% for a in aircraft %}
    <img src="{{ a.image.url }}" />
{% empty %}
    The aircarft queryset is empty
{% endfor %}

I assume that your model for Aircraft has a ImageField, so, to get the image url, you must use "aircraft.image.url" if the ImageField is called "image". The "empty" template tag will show you if your queryset is empty. If the message "The aircarft queryset is empty" is not shown, then you should look the browser developer tool for any problem in the network distributions of media files

edited Mar 27, 2017 at 21:18

answered Mar 27, 2017 at 20:15

Nazkter

1,1101 gold badge12 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

xyres Over a year ago

@HoshAdf Solution in this answer should work. Do you see any 404 errors? What do your browser's network logs say? Can you check the value of image src in your browser by Inspect Element? What is the value?

Hosh Adf Over a year ago

@Nazkter added!

Nazkter Over a year ago

It seems correct to me, my answer should work. you can try the edition of my answer to find what is your problem.

Collectives™ on Stack Overflow

How to display image? Django

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related