Menu
I'm new to django and I've been playing around with uploading pictures then displaying them. ... well trying to display them.
Whenever I try to display the image from a template, I just get the broken image link icon.
I'm using the sqlite3 server
settings.py
ROOT_DIR = os.path.dirname(os.path.dirname(__file__))
def location(f):
return os.path.join(ROOT_DIR, f)
MEDIA_URL = 'http://127.0.0.1:8000/media/'
MEDIA_ROOT = location('media/')
models.py
class Image(models.Model):
image = models.ImageField(upload_to = 'images/')
views.py
from imageupload.settings import MEDIA_ROOT, MEDIA_URL
def main(request):
imgs = Image.objects.all()
return render_to_response('index.html', {'images': imgs, 'media_root': MEDIA_ROOT, 'media_url': MEDIA_URL})
url.py
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Right now I've just used the admin to upload images. And that seems to work fine, they go to where I expect
But when I try to display them:
template
<!DOCTYPE html>
<html>
<img src="<correct path to project>/media/images/photo_1.JPG" />
{% for img in images %}
<img src="{{ media_root }}{{ img.image.name }}" />
<img src="{{ media_url }}{{ img.image.name }}" />
<img src="{{ img.image.url }}" />
{% endfor %}
</html>
I get the broken icon for each one.
The browser source code shows me:
<!DOCTYPE html>
<html>
<img src="<correct path to project>/media/images/photo_1.JPG" />
<img src="<correct path to project>/media/images/photo_1.JPG" />
<img src="http://127.0.0.1:8000/media/images/photo_1.JPG" />
<img src="http://127.0.0.1:8000/media/images/photo_1.JPG" />
</html>
that makes sense, I only have one photo uploaded.
and if I copy one of the hard links and put it into some other html file ...it works
463
In django we can deal with the images with the help of model field which is ImageField . In this article, we have created the app image_app in a sample project named image_upload. The very first step is to add below code in the settings.py file. MEDIA_ROOT is for server path to store files in the computer.
The media directory should be created under myproject directory. If you want to put images and videos into separate folders then you can create images and videos directories under media directory.
In Django, all static files go into the static directory. This includes images, CSS files, javascript files, etc. So you would have a static directory and inside of this static directory to separate and organize different files, best practice is to create an images directory, a css directory, javascript directory, etc.
Serving the 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.
Oh FFS....
aperently it's
MEDIA_URL = '/media/'
NOT
MEDIA_URL = 'http://127.0.0.1:8000/media/'
...despite #'http://127.0.0.1:8000/media/' being written right next to it
working img link looks like so:
<img src="/media/images/photo_1.JPG" />
you definitely need the:
static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
in the url file also
88
For me, I did the following two things:
Define media url in the settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
and then in the project's urls.py, defined serving url for development and production purpose:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('django_app.urls')),
]
# Serving the media files in development mode
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
else:
urlpatterns += staticfiles_urlpatterns()
then you can reference the image in the media folder in the template like this:
<img src="media/path_to_image" />
Note: Don't forget to set the DEBUG flag to False in the settings.py for production.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
