How to display a image which is generated in the backend with Django

Question

I am new to django and I am confused with the image display problem. Now I have a image of word-cloud generated in the backend(let's say, topicWords.py) and I don't know hot to deal with it. (1) How can I store it in the image field of model UserProfile? In the models.py, I have:

class UserProfile(models.Model):
user = models.OneToOneField(User)
tagcloud = models.ImageField(upload_to ='rap_song/raptle/pic/')

Is it right to directly do like:

user.userprofile.tagcloud = wc #wc is the image generated

(2) What should the setting of MEDIA_ROOT and MEDIA_URL be?

(3) How should I display it in the .html?

<img src = "???">

Thank you very much!

Answer 1

MEDIA_URL should be like this:

MEDIA_ROOT='(the full path to the media folder)' (i.e: '/home/jason/work/project/media/')
MEDIA_URL='/media/'

And add these lines to the end of your urls.py file:

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

You can access it in the templates using:

<img src = "{{ user.userprofile.tagcloud.url }}">

If you want to set an ImageField path in Django manually then you can save the image file and then set the path value when saving the model instance. You can refer this link for more info on it.

Answer 2

settings.py

MEIDA_URL = '/pic/'
MEDIA_ROOT = os.path.join(REPOSITORY_ROOT, 'pic/')

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(REPOSITORY_ROOT, 'static/')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
'/var/www/static/',
)

urls.py

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

urlpatterns = [
......
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += staticfiles_urlpatterns()

models.py

class UserProfile(models.Model):
user = models.OneToOneField(User)
tagcloud = models.ImageField(upload_to ='rapper/')

topicWords.py

d = path.dirname("/rapper/")


wc = WordCloud(background_color="white", max_words=2000, font_path='WeibeiSC-Bold.otf')
# generate word cloud
wc.generate_from_frequencies(word_tag)
# save to the "rapper/", right?
wc.to_file(path.join(d,"rapper1.png"))

userprofile.tagcloud = "rapper/rapper1.png"
userprofile.save()

Answer 3

Django's models.ImageField has a save() method inherited from FileField, which is usually the one you want to use when generating images on the server. That method takes care of upload_to and also works with other file storage backends.

from io import BytesIO
# Or if you use python 2:
# from StringIO import StringIO as BytesIO 
from PIL import Image
from django.core.files.base import ContentFile

wc = Image()  # Create the image somehow
filename = 'filename.png'  # Make a filename as well

in_memory_file = BytesIO()
wc.save(in_memory_file)
profile_image = ContentFile(in_memory_file.getvalue())
user.userprofile.tagcloud.save(name=filename, content=profile_image, save=False)
user.userprofile.save()

Docs: https://docs.djangoproject.com/en/1.8/ref/models/fields/#django.db.models.fields.files.FieldFile.save

FieldFile.save(name, content, save=True)

Takes two required arguments: name which is the name of the file, and content which is an object containing the file’s contents. The optional save argument controls whether or not the model instance is saved after the file associated with this field has been altered. Defaults to True.

Note that the content argument should be an instance of django.core.files.File, not Python’s built-in file object.