We Keep Coding

Django doesn't put /media/ in front of image url outside of admin section

In the admin area of Django, the image is well served because django automatically puts '/media/' in front of the image url.
But in the public part of my website, when I do this :
<img class="card-img-top" src="{{ article.image_desc }}" alt="Card image cap">
The image is not. served because the url is not complete.
How to easily fix this issue ? I could do this :
<img class="card-img-top" src="/media/{{ article.image_desc }}" alt="Card image cap">
But it's not convenient at all.

By using {{ article.image_desc }} Django is not getting the full path of the image.
To fix that you should just do the following:
{{ article.image_desc.url }}
Also, you need to have the following in the settings.py:
MEDIA_ROOT = os.path.join(BASE_DIR, 'data/') # 'data' is my media folder
MEDIA_URL = '/media/'

Django - What is different {% static %} and /static/?

I am studying Django. In my settings.py :
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
and when I try to add an image in a template,
<img src="{% static "img/person.png" %}"/>
<img src="{{ STATIC_URL }}img/person.png" />
<img src="/static/img/person.png" />
All three are shown in the browser as:
<img src="/static/img/person.png" />
Then, What is the different between them?
If there is no problem, can I use
<img src="/static/img/person.png" />
in the template code?

The problem with hardcoded URLs <img src="/static/img/person.png" /> is that if in future you want to change static URL you have to go through all files to replace it with newer one, and usually in production sometimes we want to use CDN to serve static content and that is not served via /static/.
For the other difference between {% static %} and {{ STATIC_URL }} check this answer.

Media Url not resolving properly

I have the media url and media root as follows.
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, MEDIA_URL)
my urls.py is
if settings.DEBUG:
# static files (images, css, javascript, etc.)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
I am accessing it in the template as follows:
<img class="hl" src="{{ MEDIA_URL }}prop/image0.png" /></a>
The url replaced when rendered is correct, which is /media/prop/image0.png.
But it says the media location is not found.

I suggest you use staticfile for this purpose, because you are using a specific image and not something that will be uploaded in the future.
If you decide to use static files, put the image in your static folder and then use this:
<img src="{% static 'image0.png' %}" style="">
Don't forget to load your staticfiles:
{% load staticfiles %}
By the way, for future, if you wanted to use media files in your templates you have to do it like this:
{% for image in images %}
<img src="{{ image.url }}" class="h1">
{% endfor %}

django set image src path

I want to set an image as a submit button form:
<form action="/final" method="post">{% csrf_token %}
<input type="hidden" name="title" value="niloofar">
<input type="image" name="submit" src="cat.jpg">
</form>
The image is in the template directory and the image is not shown.
How should I manage it with STATIC_URL = '/static/'?
Should I make a directory called static and put the image there?
And how the form should be changed?

You need to properly configure your static files. More info can be found in Django docs
Additionally, make sure you are writing the correct path the image, as shown in the docs:
{% load staticfiles %}
<img src="{% static "my_app/myexample.jpg" %}" alt="My image"/>

Now some changes are there to be noted.
You should not load your static files with
{% load staticfiles %}
Instead you should write
{% load static%}
And in source (denoted as src), you should give path of image file from static folder located in your directory. Not from the local resources.

Django static templatetag not displaying SVG

I'm trying to use django's static templatetag to display an SVG, but it doesn't seem to recognize the SVG as a valid image url. This is what I currently have:
settings.py
import mimetypes
mimetypes.add_type("images/svg+xml", ".svg", True)
landing.html
{% load staticfiles %}
<img src="{% static 'images/right-arrow.svg' %}" />
At least in my view.py, it recognizes the SVG mimetype:
views.py
print(mimetypes.guess_type(static('images/right-arrow.svg')))
# returns ('images/svg+xml', None)
The SVG does display in a non-django page, and it will download the SVG if I try to open the SVG path in a new browser tab.
I'm currently using python 3.4 and django 1.8.4.

I found the issue. In settings.py, it should be mimetypes.add_type('image/svg+xml', '.svg', True). image should be singular.

I faced a similar issue.I would recommend you to use :
src="{{ STATIC_URL }} images/right-arrow.svg" instead of src="{% static 'images/right-arrow.svg' %}"
svg format might not always identify django's method of obtaining staticfile contents.Hope this helps :)

Add this in your settings.py file.
import mimetypes
mimetypes.add_type("image/svg+xml", ".svg", True)
mimetypes.add_type("image/svg+xml", ".svgz", True)
In your cases you have added images in add_type which should be singular (image).

You are loading staticfiles and using static?
This is wrong.
Try changing {% load staticfiles %} <img src="{% static 'images/right-arrow.svg' %}" /> to
{% load static %} <img src="{% static 'images/right-arrow.svg' %}" /> and you also need to consider which app you should find your static files.