How to save uploaded files to models and serve them in templates? - django

Question

I've been following the django 2 official tutorial but I'm a bit confused as how to work with images and uploaded files.
I have a project with a few apps. Let's call the project myProj and the app myApp. There is a model in myApp called myModel which has an image field myImage.
Here is my model:
from django.db import models
class myModel(models.Model):
myImage = models.ImageField(upload_to='myApp_images')
Here is my template:
<img src="{{ n.image }}"></img>
Here is my view
from django.shortcuts import get_object_or_404, render
from .models import myModel
def index(request):
n = myModel.objects[0]
context = {
'n': n,
}
return render(request, 'myModel/index.html', context)
And here is my settings:(parts I thought were relevant)
INSTALLED_APPS = [
'news.apps.myModelConfig',
'django.contrib.staticfiles',
]
MEDIA_URL = '/media/'
MEDIA_ROOT = '/home/aran/myfiles/projects/futureCoin/media/'
Here is my myProject/urls.py:
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('myModel/', include('myModel.urls')),
path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
So I made an instance of the model through the django admin site.
Here is the directory tree after that(I removed the pycache):
.
├── myProject
│   ├── __init__.py
│   ├── models.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── media
│   └── myModel_images
│   └── myImage.jpeg
├── myModel
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── __init__.py
│   ├── models.py
│   ├── static
│   │   └── myModel
│   │   ├── images
│   │   │   └── bg.jpg
│   │   └── style.css
│   ├── templates
│   │   └── myModel
│   │   └── index.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
Now the problem is that when I try to open the index page the image is not shown because the url to it is: http://127.0.0.1:8000/myModel/myModel_images/myImage.jpg
however if I manualy open the url:http://127.0.0.1:8000/media/myModel_images/myImage.jpg I see the right Image. Can anyone please help me understand where the problem is and how I can fix it? Any other feedback on my code would also be much appreciated.

Answer 1

What happens when I do n.image and why does it give me a url but a wrong url?
It's not a wrong url at all. That's because n.image returns the url path of the image like /path/to/image.jpg exactly the way that you have set up in your ImageField upload_to
myImage = models.ImageField(upload_to='myApp_images')
by default this will be prefixed by your url address and becomes 127.0.0.1:8000/path/to/image.jpg. As you can see it misses the /media/ as provided in settings.MEDIA_URL where your all images are localized.
So now by using {{ n.image.url}}, you actually call it from your settings configuration, your MEDIA_URL /media/ will be added as prefix and becomes /media/path/to/image.jpg prefixed by the url 127.0.0.1:8000
To fix it, in your template, access the image url with {{instance.field.url}}
try:
<img src="{{ n.image.url }}"></img>
instead of
<img src="{{ n.image }}"></img>