Live site not finding image file - django

I currently have the function of uploading images on my site. All the images are working uploading correctly, but when I try to display them using the image.url attribute in the view, it gives me a 404 not found error.
My believe it might be something with my Apache config or Django settings.py.
In my Apache config under I have:
Alias media/ /var/www/MySite/media/
<Directory /var/www/MySite/media>
Require all granted
</Directory>
In my settings.py:
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
MEDIA_ROOT = os.path.join(PROJECT_ROOT, 'media')
MEDIA_URL = 'media/'
In my view I am trying to display the image as follows:
{% for photo in photos %}
<div class="col-md-3 photo-wrapper">
<img src="{{ photo.image.url }}"/>
</div>
{% endfor %}
The image then looks for this url:
http://mysite.co.za/media/profile_photos/photo.png
But it doesn't find the image.
I did check that the image gets uploaded and it does to the correct location.
Also my model for clarification:
image = models.ImageField(upload_to='profile_photos')
Note: This is working fine when I work with the site on my localhost.
Edit:
So while I was trying different fixes I messed up some stuff that caused me to change the Debug in the settings.py to True, then I saw the image was actually being shown. I changed the debug to false again and the image was once again not showing. What would cause dubug to influence this?

The apache alias directive should start with a /
Alias /media/ /var/www/MySite/media/

Related

Django turns absolute filepaths into relative, forcing the server to be run from the project folder

I'm trying to create a website where you can add images to models, which will then be in turn loaded on the homepage. However, I've noticed that when I run my server, it tries to get images from my /home folder.
Here's my models.py:
image_directory = join(settings.STATICFILES_DIRS[0], "website/images")
class Item(models.Model):
image = models.FilePathField(path=image_directory, recursive=True)
Here's my home.html (I'm just abbreviating it, item is passed in OK:
<img src="{{ item.image }}">
I run the migrations and run the server, and I'm able to select the image in /admin. The images look like: "sub_img_folder/img.jpg"
Then I go to /home and I get the following errors:
Not Found: /home/...absolute-path-to-project.../static/website/images/sub_img_folder/img.jpg
Not Found: /home/static/website/images/sub_img_folder/img.jpg
Any help would really be appreciated.
EDIT: Here's some of my settings.py contents.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
...
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
...
MEDIA_ROOT = os.path.join(BASE_DIR + "/static/website/")
MEDIA_URL = "images/"
EDIT 2: Just to clarify, the images you add to models are already on the server. You just need to clarify which image in the admin page, hence FilePathField instead of FileField. It somehow doesn't find the image when trying to load it on the home page but it successfully shows and selects in the admin page.
EDIT:
Since you are using a FilePathField, it only stores the path on disk, not the URL. The solution would be to use the MEDIA_URL in your template to formulate the URI string, something like this:
<img src="{{ MEDIA_URL }}/{{ FILE_NAME}}">
Where MEDIA_URL is your Media URL from settings.py and FILE_NAME is the name of the file itself.
It may be better to use an actual ImageField or FileField which stores all the information you need, or just have a CharField with the file name and build the URL like above.
PREVIOUS ANSWER:
Try adding the MEDIA elements to your Django settings.py. MEDIA_ROOT and MEDIA_URL tell Django how to handle user uploaded files:
In your settings.py:
MEDIA_ROOT = "/path/to/media/folder"
MEDIA_URL = '/media/'
In your urls.py:
urlpatterns = [
.......
] += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Documentation:
https://docs.djangoproject.com/en/3.0/ref/settings/#media-root

How to serve files to download from HTML using django templating

I'm stuck in my project where i want to serve some files to download on clicking the download button on my webpage.
Can anyone kindly direct me how to serve downloadable files on the web pages using template in django.
in normal html, we can achieve as
<a href="<path_of_file>" download>
I am beginner in django. need some assistance with django templating
Generally, to render the dictionary text "{{ inser_me }}" in HTML and i created the entry in "views.py" as below.
def index(request):
my_dict = {'insert_me':"Now I am coming from first_app/index.html!"}
return render(request,'app/index.html',context=my_dict)
I saw about media file handling and added the below in "settings.py"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
and I put the contents under media directory. I can able to download the file if I use as "http://localhost/media/file_name"
can you please advise how i need to instruct in views.py to access this url.
<a href="{{ ?? }}" download>
Just replace with the file url in your template:
<a href="{{ my_file.url }}" download>

Django templates - Image from media_root rendered in homepage, but not other pages

I have an image that renders on my homepage, but it doesn't on a different page using the same code. I figure the problem may be the difference my url path maybe? It's the only difference I can find. When I inspect each element, this is what I see:
Working image: /event/image.png
Broken Image: /event/media/image.png
I'm rendering the image like this in my template:
<img src="media/{{event.image}}" class="img-responsive" />
My model is just aa model.Image field and here are is my view for the Broken image page:
def event(request, product_id):
event = get_object_or_404(Event, id=product_id)
image = event.image
context = {'event':event, 'image':image}
template = 'tourney.html'
return render(request, template, context)
In my terminal, it says image not found. So how can I change my settings so that it looks in the right directory no matter which path I'm in? Here are my media settings:
if DEBUG:
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static', 'static-only')
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static', 'media')
STATICFILES_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), 'static', 'static'),
)
You need a leading slash: "/media/...".
However, even better would be to use the built-in property that gives you the full URL including MEDIA_URL:
<img src="{{ event.image.url }}" class="img-responsive">
Instead of building url by yourself, like media/{{event.image}}, let Django do that job for you:
<img src="{{ event.image.url }}" class="img-responsive" />
That way, Django will create proper URL, using MEDIA_URL from your settings. Be aware that your web server configuration must match that and serve images from MEDIA_ROOT on MEDIA_URL

Managing static/images in Django with AppEngine

I am trying to add an image to my simple google app engine code, but it doesn't work if I follow the tutorial. It works if my image is in my app directory, but not when I move it to static.
When I am using it in plain html like:
<img src="../static/myimage.jpg"></img>
or
 
and many other variations, the image just does not show (it shows when it is outside of static dir). When I am doing it as in the tutorial, defining STATIC_URL in my settings file:
STATIC_URL = '/static/'
And adding this lines (or variations like "/my_image.jpg" and so on)
{% load staticfiles %}
<img src="{% static "my-app/myimage.jpg" %}" alt="My image"/>
causes server error (500). I am using django 1.3
Here is the directory structure:
my-app
\static
myimage.jpg
\templates
base.html
# and other html files
\urls.py, settings.py #and other .py files
App.yaml:
-url: /(.*\.(gif|png|jpg))
static_files: static/\1
upload: static/(.*\.(gif|png|jpg))
setting.py:
ROOT_URLCONF = 'urls'
urls.py:
STATIC_URL = '/static/'
What did you set STATIC_ROOT to?
Generally though, using GAE's static file handlers in app.yaml will give you better caching and probably lower cost than serving the images with django's staticfiles.

Displaying image held in ImageField in a django template

I'm trying to display an ImageField image in my django template.
I'm doing it as such:
<img src="{{ pic.content.url }}" />
This, however, shows an image for mysite.com/appname/appname/picturename.ext. (which I'm like 90% sure is wrong; I don't know what's right, though. The images are kept in the larger django-site folder, and I don't know if apache can serve them directly by url)
My site settings.py file has the media directory correct (it uploads using the admin page and all that jazz), but this merely isn't working.
How do I show the image?
I am assuming you have done the required MEDIA settings. Make sure you are passing the RequestContext from your view and try changing your src to
<img src="{{MEDIA_URL}}{{pic.content.url}}" />
Update:
I think you need to change your media settings:
MEDIA_ROOT = '/var/www/mysite/media/' #This needs to point to the media folder
MEDIA_URL = '/media/'