[Django]-Accessing "Media" files in Django

Folder Setup:

Your project root should be something like:

/app1
/app2
/media
/static
/templates
urls.py
settings.py
manage.py

The media folder is supposed to hold things like images, downloads and other material that might be uploaded during normal use of the website (i.e. after development is finished)

The static folder is supposed to hold all the CSS/JS and other material that is a part of the development of the site

---

Settings.py:

MEDIA_ROOT is the absolute server path to the static folder mentioned above. That means it should be something like:

MEDIA_ROOT = "/User/Bob/Sites/MySite/Project_root/media/"

MEDIA_URL is the relative browser URL you should access your media files from when you are looking at the site. It should be (usually)

MEDIA_URL = "media/"

which means all material can be viewed at http://example.com/media/

Similarly, STATIC_ROOT should be something like

STATIC_ROOT = "/User/Bob/Sites/MySite/Project_root/static/"

and STATIC_URL be

STATIC_URL = "static/" 

---

Serving the files:

Now that you have told django where these folders should be, and the correct URLs to access them, you need to serve all requests to the folders correctly.

Usually when you are in production, you want the webserver to take care of serving your static files and media files.

If you are developing though, you can just get the django development server to serve them for you.

To do this, you tell it to route all request that come in to http://example.com/media to your MEDIA_ROOT and all requests that come in to http://example.com/static to your STATIC_ROOT.

To do this, you add some URLS to URLS.py like you have:

from django.conf import settings
if settings.DEBUG:
    urlpatterns += patterns('',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
            'document_root': settings.MEDIA_ROOT,
        }),
        url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
            'document_root': settings.STATIC_ROOT,
        }),
)

---

Extra:

If you have multiple apps, each with their own CSS and JS files, you mightn’t want to throw them into one single /static/ folder. It might be useful to put them in subfolders of the apps they belong to:

/app1/static/ # Specific static folder
/app2/static/
/media/
/static/ # Root static folder

Now, your webserver/development server is only looking for static files where you told it to look (i.e. the root static folder) so you need to collect all the files in the subfolders and copy them to the root static folder. You could do this by hand, but django provides a command to do this for you (this is the whole point of the static app)

./manage collectstatic

I followed timmy procedure but I got an error that No module name django.views. When I use import django.views in my virtualenv everything works fine i.e It’s not an issue with the import of library.

However, I was able to solve this problem by following this procedure in my main urls file

from django.conf.urls.static import  static
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

https://docs.djangoproject.com/en/dev/howto/static-files/

I had the same problem so I added these lines

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

urlpatterns = [
    url(r'', include('blog.urls')),
    url(r'^admin/', admin.site.urls),
    url(r'^cadmin/', include('cadmin.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

in urls.py in the Django project configuration directory. more information :https://overiq.com/django/1.10/handling-media-files-in-django/

In your settings.py, make sure you add

django.core.context_processors.media

in your TEMPLATE_CONTEXT_PROCESSORS.Otherwise the MEDIA_ROOT won’t work when you use it in the templates.

I am using Django 1.10. And my media folder is ‘uploads’
This is the configuration in my settings.py:

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

And in the template I put the name o my MEDIA_URL before de object.name instead object.url like this:

    <img src="uploads/{{ imagen_identificativa.name }} " alt="{{imagen_identificativa}}">

And it works for me.
I hope this helps.

For Django version 3 I used the following:

from django.conf import settings
from django.urls import re_path
from django.views.static import serve

# ... the rest of your URLconf goes here ...

if settings.DEBUG:
    urlpatterns += [
        re_path(r'^media/(?P<path>.*)$', serve, {
            'document_root': settings.MEDIA_ROOT,
        }),
    ]

my settings.py

BASE_DIR = Path(__file__).resolve().parent.parent
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
STATIC_URL = '/static/'

here is a documentation link https://docs.djangoproject.com/en/3.1/ref/views/
In case you are using Django REST with some dev server don’t forget to update your dev proxy settings to redirect /media to Django backend

Here is another alternative:

Set your media configs something like this inside ‘settings.py’:

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

Lets say I have a modal called person with image filed like below:

class Person(models.Model):
    name = models.CharField(max_length = 30)
    photo = models.ImageField(upload_to = 'photos')

Now here upload_to path we are taking about is inside the MEDIA_ROOT folder. In my case a media folder will be created inside which photos folder will be created and our media here will be dumped.

So now in my template I do something like this:

<img src="{{ person.photo.url}} />

So in short, you got a field, use it like this:

src ={{ object.field.url}}

Hope that helps! Happy Coding!

I spent 1/2 day trying to find THE solution. The magic bullet was using src = {{ object.field.url }}
Everything seemed to be set up correctly. I used the Admin feature to create the folder in the root – media\images\aaa.jpg

What I had:

setting.py

MEDIA_URL = "media/"
MEDIA_ROOT = BASE_DIR / "media"

urls.py

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

models.py

image = models.ImageField(null=True,blank=True,upload_to="images/")

html file

<img src={{quiz.image}} alt="no image found">

Changing the above to

<img src={{quiz.image.url}} alt="no image found">

displayed the image!!