CODEWITHSUNDEEP
pythondjangopython-3.xwebdjango-rest-framework
DataTales
DataTales

Reputation: 19

Django - Unable to display an image from folder within media folder

I am trying to load an image from a folder within 'media' folder (media/tshrirts) onto template using django. Below is my settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

MEDIA_URL = '/media/'
#MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_ROOT = 'media'
**I tried both the roots none of them work.

Below is my models.py

 from django.db import models
 # Create your models here.
class tshirts(models.Model):
    brand=models.CharField(max_length=50)
    name=models.CharField(max_length=100)
    price=models.DecimalField(max_digits=10, decimal_places=2)
    image = models.ImageField(upload_to='tshirts/')

def __str__(self):
    return self.name

this is part of the tshirts.html Why image.url is none??

<div class='tshirts'>
        {% for eachtshirt in alltshirts %}
        <div class='tshirt'>
            <a href="#">{{eachtshirt.brand}}</a>
            <p>{{eachtshirt.name}}</p>
            <p>{{eachtshirt.price}}</p>
            <img src="{{eachshirt.image.url}}"/>
            {% if eachshirt.image.url == None %}
            <p>{{"Image Not Found"}}</p>
            {% endif %}
        </div>
        {% endfor %}
    </div>

finally, urls.py

urlpatterns = [
.
.
.
    url(r'^tshirts/',include('tshirts.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

After I uploaded the image as an admin and clicked the link, the image was properly displayed. http://127.0.0.1:8000/media/tshirts/t-shirt2.jpg - the image was displayed here. How can I fix this, please let me know thanks!!! Screenshot for the page

Upvotes: 1

Views: 2826

Answers (1)

Lemayzeur
Lemayzeur

Reputation: 8525

The root of your media, should include the BASE_DIR, like the following:

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = '/media/'

You have a typo in your template, you'are accessing {{eachshirt.image.url}} without t. the correct is

{{eachtshirt.image.url}} <!-- with t : each tshirt -->

Upvotes: 1

Related Questions