how to access upload images

Question

I am creating one app using following two url's , homepage.html and detail.html.

*models.py*

class News(models.Model):
  primary_image = models.ImageField("Main Image ",upload_to = "static/uploadedImg/main",)
  secondary_Image = models.ImageField("Sub Image",upload_to = "static/uploadedImg/sub",)

In settings.py I had defined MEDIA and MEDIA_ROOT

I want to display random primary_image in homepage.html with primary_image as a link.

*articles.html*

    <div id = "randommainImage">
         <a href = "#"><img src = "{{random_object.primary_image}}"></a>
    </div>

 NewArticles 
 articles
 db.sqlite3
 manage.py
 media
 NewsArticles
 README.md
 static

NewsArticles\articles
admin.py
forms.py
models.py
static
Templates
tests.py
urls.py
views.py

Also, I want to display both primary_image & secondary_Image in a detail.html Can anybody help me?

Answer 1

If you have these in your settings properly then you're ready to go:

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

A folder called media will be created to upload all the images in that folder. Your image fields should look like this, I don't get why are you creating a folder for them in the static folder..

primary_image = models.ImageField(upload_to='uploadedImg/main/')
secondary_image = models.ImageField(upload_to='uploadedImg/sub/')

So your primary image will be in media/uploadedImg/main/img.png

View can look like:

def index(request):
    context_dict = {}

    news = News.objects.all()
    context_dict['news '] = news 

    return render(request, 'index.html', context_dict, )

And to get the primary image you'll use {{ news.primary_image.url }} in your template.

edit>

Add this in your urls.py

from django.conf import settings

# ... your normal urlpatterns here

if settings.DEBUG:
    # static files (images, css, javascript, etc.)
    urlpatterns += patterns('',
        (r'^media/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': settings.MEDIA_ROOT}))

Answer 2

If you've defined correctly MEDIA and MEDIA_ROOT , to display the first image in the article.html template you use:

<img src = "{{ MEDIA_ROOT }}{{ random_object.primary_image }}" />

and likewise in the detail.html template:

<img src = "{{ MEDIA_ROOT }}{{ random_object.primary_image }}" />
<img src = "{{ MEDIA_ROOT }}{{ random_object.secondary_image }}" />