Django media image displays blank box

76 views Asked by At

Hi I'm trying to display an uploaded user image in django but when I try to display it only a blank box appears. However when I click on the image it brings up a new page with the image. I don't know why it isn't displaying on the page.

html

{% load mptt_tags %}
{% recursetree location %}
<div class="card">
  <div class="card-body">
     <a class="btn btn-primary" type="button" href="/AddClimb/{{node.id}}">Add Climb</a>
  </div>
</div>
<a href="{{ node.img.url }}"><img source="{{node.img.url}}" width="500" height="400"></a>
<div class="container">
    <div class="row equal">
        <div class="col-md-6 col-sm-6">
          <div class="card-header bg-primary text-white text-center">{{ node.name }}</div>
            <div class="card" style="background-color: #eee;">
              <p class="font-weight-bold">Image: <img source="{{node.img.url}}"></p>
              <p class="font-weight-bold">Description: <span class="font-weight-normal">{{node.description}}</span></p>
              <p class="font-weight-bold">Directions: <span class="font-weight-normal">{{node.directions}}</span></p>
              <p class="font-weight-bold">Elevation: <span class="font-weight-normal">{{node.elevation}}</span></p>
              <p class="font-weight-bold">Latitude: <span class="font-weight-normal">{{node.latitude}}</span></p>
              <p class="font-weight-bold">Longitude: <span class="font-weight-normal">{{node.longitude}}</span></p>
              <p class="font-weight-bold">Added By: <span class="font-weight-normal">{{node.author}}</span></p>
              <p class="font-weight-bold">Date Added: <span class="font-weight-normal">{{node.date}}</span></p>
              <a class="btn btn-primary float-center" type="button" href="/EditLocation/{{node.id}}/">Edit Location</a>        
            </div>
        </div>
{% endrecursetree %}

settings.py

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

urls.py

from django.conf.urls import url
from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('Choss_App.urls')),
]
# if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
1

There are 1 answers

1
willeM_ Van Onsem On

It is src=…, not source=…:

<img src="{{ node.img.url }}" …>