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 %}
Related
I am trying to build an e-commerce website using python's Django framework as part of a practice project. However, I am not being able to display my product's image on my landing page.
Django version: 3.2.4
models.py:
class Listing(models.Model):
title = models.CharField(max_length=100)
price = models.FloatField()
description = models.TextField()
image = models.ImageField(upload_to="auctions/images/", default="")
settings.py:
STATIC_URL = '/static/'
# Managing media
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
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("admin/", admin.site.urls),
path("", include("auctions.urls"))
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
views.py
def index(request):
listings = Listing.objects.all()
return render(request, 'auctions/index.html', {
"listings": listings
})
index.html
{% extends "auctions/layout.html" %}
{% load static %}
{% block body %}
<h2>Active Listings</h2>
{% for listing in listings %}
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="{% static listing.image %}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{ listing.title }}</h5>
<p class="card-text">{{ listing.description }}</p>
<p class="card-text">Price - {{ listing.price }}</p>
Bid
</div>
</div>
{% endfor %}
{% endblock %}
I am only getting the alt attribute for the img tag.
As mentioned by #Pruthvi Barot you need to change the code you are using in your html from
src="{% static listing.image %}"
to
src="{% url listing.image.url %}"
That is because you image as a media and allowing them to served via a url as you define here:
# Managing media
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
The static file are in this case images that you placed in the directory and do not manage (upload and delete) from the Django Admin Panel.
another solution mentioned by #MojixCoder is to replace the above mention line of code with
src="{{ listing.image.url }}"
This is the preferred solution and is the one specified in Djangos official documentation on MEDIA_URL (version 3.2)
I'm building a project in Django 3, but the images aren't linking in the files.
All images are store in a folder called media & here's the HTML for my logo for example -
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{{ MEDIA_URL}}logo.png" height="70" class="pr-4" alt="Site logo">
Then I've this in my settings -
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
and in my project level URLS I've got -
from django.conf import settings
from django.conf.urls.static import static
+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
You should use static folder for the static content like images, css, js etc... and media for the dynamic content like uploads from users, avatar pictures... then you should use this template tag:
{% load static %}
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{% static 'logo.png' %}" height="70" class="pr-4" alt="Site logo">
If you want to use media folder anyways, you need to add this in your urls.py (extracted from here) in order to make it work fine in local:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
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.
please help bring images into the template
in django1.6 I uploaded via the form in the database image. screenshot. ( checked that the images loaded in a specific directory ) . then imported into the template file settings.py variable BASE_DIR and to all records of a table . then tried in the template to display the image as follows:
{% for entrie in all_entries_carousel %}
<a href="{{ entrie.link }}" title="{{ entrie.title }}" target="_blank">
<img src="{{ BASE_DIR }}/{{ entrie.image }}" width="300" height="200" alt="{{ entrie.title }}" />
</a>
{% endfor %}
results in images that I have not loaded and displayed.
in the source path
c:\Python33\django_projects\proj1/carousel/media/images/img1.png
please tell me how can I still display the image. Sure , there is a path without importing BASE_DIR
ps this way does not work proj1/carousel/media/images/img1.png
You need to configure your static files.
From Django docs:
Make sure that django.contrib.staticfiles is included in your
INSTALLED_APPS.
In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
In your templates, either hardcode the url like
/static/my_app/myexample.jpg or, preferably, use the static template
tag to build the URL for the given relative path by using the
configured STATICFILES_STORAGE storage (this makes it much easier
when you want to switch to a content delivery network (CDN) for
serving static files).
{% load staticfiles %}
<img src="{% static "my_app/myexample.jpg" %}" alt="My image"/>
Store your static files in a folder called static in your app. For
example my_app/static/my_app/myimage.jpg.
This question already has answers here:
Django template image won't load
(4 answers)
Closed 9 years ago.
Image wan't load.I see o broken image icon.I use the static tag. I also tried giving the absolute path and never worked.I used the alt tag but still i can only see the broken image icon. Is the tag correct what else should i try ??? The images is in static\images\logo.png
base.html
{% load static %} {# loads static tag #}
<div id="header">
{% block header %}
<img src="{% static 'images/logo.png' %}" alt="alternative text" />
{% endblock %}
</div>
setting.py:
MEDIA_ROOT = ''
MEDIA_URL = '/media/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = ('assets','C:\Users\#########\workspace\project\static'),
Try either
<img src="{{ STATIC_URL }}images/logo.png" alt="alternative text" />
or fixing your quotes
<img src="{% static 'images/logo.png' %}" alt="alternative text" />
and fixing your settings
STATICFILES_DIRS = ('assets', r'C:\Users\#########\workspace\project\static'),
or
STATICFILES_DIRS = ('assets','C:\\Users\\#########\\workspace\\project\\static'),
It's worth asking whether or not you've used Django's collectstatic method after including the image in your assets folder.