Django 1.9 - Не показывать загруженные пользователем изображения

Question

Я пытаюсь отобразить изображения, которые были загружены пользователем, но независимо от того, что я пытаюсь, я получаю значок неработающей ссылки. Я искал и просматривал документацию, на SO и в других местах уже пару дней безрезультатно. Я новичок в Django и в настоящее время в разработке, поэтому я уверен, что сделал некоторые другие ошибки новобранец, но сейчас единственное, что меня волнует, - это отображение загруженных изображений в шаблонах.

Вот соответствующие фрагменты моего кода:

settings.py

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

urls.py

urlpatterns = [ 
    url(r'^admin/?', admin.site.urls), 
    url(r'^accounts/', include('registration.backends.simple.urls')), 
    url(r'^about/?', profiles.views.about, name='about'), 
    url(r'^properties/single/?', properties.views.single, name='single_mens'), 
    url(r'^properties/married/?', properties.views.married, name='married'), 
    url(r'^properties/add/add_photos/?', properties.views.add_photos, name='add_photos'), 
    url(r'^properties/add/?', properties.views.add_rental, name='add_rental'), 
    url(r'^', profiles.views.home, name='home'), 
] 

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) 
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 
urlpatterns += staticfiles_urlpatterns() 

models.py

class RentalPicModel(models.Model): 

    def __unicode__(self): 
     return self.image.url 

    image = models.ImageField(upload_to="pics/originals/", null=True) 
    rental = models.ForeignKey(RentalModel, on_delete=models.CASCADE) 

forms.py

class AddPhotosForm(forms.ModelForm): 

    class Meta: 
     model = RentalPicModel 
     fields = ['image', 'rental'] 

    def clean_image(self): 
     return self.cleaned_data['image'] 

    def clean_rental(self): 
     return self.cleaned_data['rental'] 

views.py

def add_photos(request): 

    form = AddPhotosForm 
    current_rental = None 
    current_photos = [] 
    if request.method == "POST": 
     form = AddPhotosForm(request.POST, request.FILES) 
     if request.POST.get('another'): 
      if form.is_valid(): 
       cleaned_image = form.cleaned_data['image'] 
       cleaned_rental = form.cleaned_data['rental'] 
       current_rental = cleaned_rental 

       pic = RentalPicModel(image=cleaned_image, rental=cleaned_rental) 
       pic.save() 

     current_photos = RentalPicModel.objects.filter(rental=current_rental) 
     current_photos = [rental.image for rental in current_photos] 
     for photo in current_photos: 
      print photo 

    context = { 
     'form' : form, 
     'photos' : current_photos, 
    } 

    return render(request, "add_photos.html", context) 

Здесь выход print заявление (после загрузки одной фотографии) является: pics/originals/DSC_1376.jpg и я могу видеть файл сохраняется в этом месте.

add_photos.html

<div class="container"> 
     <h1>Upload your photos here.</h1> 
     <br> 
     <div class='row'> 
      <form method="POST" action="" enctype="multipart/form-data"> {% csrf_token %} 
       {{ form|crispy }} 
       <div class='col col-xs-3'></div> 
       <div class='col col-xs-3'> 
        <input class="btn btn-block btn-info" name="another" type="submit" value="Save and Add Another"> 
       </div> 
       <div class='col col-xs-3'> 
        <input class="btn btn-block btn-primary" name="finish" type="submit" value="Save and Finish"> 
       </div> 
       <div class="col col-xs-3"></div> 
      </form> 
     </div> 

     {% if photos|length > 0 %} 
      <h2>Uploaded photos:</h2> 
      {% for photo in photos %} 
       <div class='row'> 
        <img src="{{ photo.url }}" alt=""> 
       </div> 
      {% endfor %} 
     {% endif %} 
    </div> 

Когда я осмотреть <img> элемент, я вижу src="/media/media_root/pics/originals/DSC_1376.jpg", который дает мне URL из http://127.0.0.1:8000/media/media_root/pics/originals/DSC_1376.jpg. Кажется, это правильное расположение файла, но оно пока не отображается.

Как я уже сказал, мне кажется, что мне нужно настроить, как это описано в документации Django и в каждом другом вопросе, который я прочитал на SO. Что мне не хватает?

Заранее спасибо.

EDIT

мне нужно изменить мой STATICFILES_DIRS настройки вообще для загруженных средств массовой информации делать? Вот что я имею прямо сейчас:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static_files"), 
) 

, где я разместил все свои файлы CSS и javascript.

Answer 1

Вы забыли объединить MEDIA_URL и {{ photo.url }}.

Try:

<img src="{% get_media_prefix %}{{ photo.url }}" alt=""> 

Подробнее о {% get_media_prefix %}HERE в документации.

Answer 2

Мои проблемы были проблемой. Когда он пытался получить медиафайлы, он сопоставлял url(r'^', profiles.views.home, name='home'), прежде чем он соответствовал любому из медиа-адресов. Простой $ установил его:

url(r'^$', profiles.views.home, name='home')