how to display image to template from imagefield in django

Question

My template cannot display the image coming from my model.

src attribute comes with proper field but it does not display the proper image

template:

       <div class="grid-product">
  
    {% for p in prod %}
    
    
    <div class="  product-grid">
        <div class="content_box"><a href="single.html">
        <div class="left-grid-view grid-view-left">
             <img  class="img-responsive watch-right" alt="not found" src="{{p.photo}}"/>
                <div class="mask">
                    <div class="info">Quick View</div>
                </div>
              </a>
        </div>
            <h4><a href="#"></a></h4>
             <p>It is a long established fact that a reader{{ p.p_name }}</p>
             Rs. 499
        </div>
   </div>
    {% endfor %} 
         <div id="show"></div>
    <div class="clearfix"> </div>
</div>

model:

class product(models.Model):
    p_id=models.AutoField(primary_key=True)
    ps_id=models.ForeignKey(alphasubcat,on_delete=models.CASCADE)
    p_name=models.CharField(max_length=100,null=True,blank=True)
    photo = models.ImageField(upload_to='productimage',blank=True)
    price=models.IntegerField()
    def __str__(self):
        return self.p_name

view:

def produc(request):
    param=dict()
    cat=categories.objects.all()
    sub=subcategories.objects.all()
    temp=request.GET['p']
    prod=product.objects.filter(ps_id=alphasubcat.objects.get(as_name=temp))
    param['prod']=prod
    param['cat']=cat
    param['sub']=sub
    return render(request,"product.html",param)

Possible duplicate of [Programmatically saving image to Django ImageField](http://stackoverflow.com/questions/1308386/programmatically-saving-image-to-django-imagefield) — SuReSh, Mar 10 '16 at 11:25

score 6 · Accepted Answer · answered Mar 10 '16 at 16:10

6

you can access image url by {{p.photo.url}}. but as here in your model:

photo = models.ImageField(upload_to='productimage, blank=True)

(blank=True) you would want to use something like:

<img  class="img-responsive watch-right" alt="not found" src={% if p.photo %}"{{p.photo.url}}"{% else %}"/something/else.png"{% endif %}/>

answered Mar 10 '16 at 16:10

varnothing

1,269
1
17
30

nice shot. One question: I get `tag start is not closed` as syntax error after closing quotes of `"{{p.photo.url}}"`. Any ideas? – stelios Jul 31 '17 at 19:56
1

@chefarov it might be a simple mismatch of opening and closing quotes as you know quotes also behave as brackets. If you can share your code, I can look into it. – varnothing Aug 07 '17 at 09:20

ilse2005 · Answer 2 · 2016-03-10T10:52:58.723

1

Try changing your code to

 <img  class="img-responsive watch-right" alt="not found" src="{{p.photo.url}}"/>

edited Mar 10 '16 at 10:52

answered Mar 10 '16 at 10:01

ilse2005

11,189
5
51
75

What is displayed in the `src` in the html source? – ilse2005 Mar 10 '16 at 10:48
my settings.py file details STATIC_URL = '/static/' STATICFILES_DIRS=[ os.path.join(BASE_DIR,"static"), ] STATIC_ROOT=os.path.join(os.path.dirname(BASE_DIR),"static_cdn") MEDIA_ROOT=os.path.join(os.path.dirname(BASE_DIR),"src/media") MEDIA_URL="/img/" – Jigar Tarpara Mar 10 '16 at 10:51
1

what does `{{ STATIC_URL }}` display? – RodrigoDela Mar 10 '16 at 10:52
Does the image display if you go to /img/productimage/pic3.jpg? – ilse2005 Mar 10 '16 at 10:53
/home/lcom52/Desktop/happydeal/static_cdn {{ STATIC_URL }} – Jigar Tarpara Mar 10 '16 at 10:57
@ilse2005 no it's not displaying – Jigar Tarpara Mar 10 '16 at 10:59
but from admin interface if i try to upload image by this model imagefield than it's succesfully uploaded – Jigar Tarpara Mar 10 '16 at 11:01
Looks like your MEDIA settings are wrong. What if you go to `/img/img/productimage/pic3.jpg` – ilse2005 Mar 10 '16 at 11:02
what you suggest for MEDIA setting – Jigar Tarpara Mar 10 '16 at 11:06
okay , i tried it is there any other available which easy to understand – Jigar Tarpara Mar 10 '16 at 11:13

score 0 · Answer 3 · answered Mar 10 '16 at 11:28

On your local server

<img  class="img-responsive watch-right" alt="not found" src="127.0.0.1:8000/{{p.photo.url}}"/>

thats fine settings in settings.py

STATIC_URL = '/static/' 

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

STATIC_ROOT=os.path.join(os.path.dirname(BASE_DIR),"static_cdn") 

MEDIA_ROOT=os.path.join(os.path.dirname(BASE_DIR),"src/media")

MEDIA_URL="/img/" –

but also debug that STATIC_ROOT is return domain/link-to-image

score 0 · Answer 4 · edited Nov 14 '19 at 04:39

0

this is work for my problem here static is my root folder for media file

img  class="img-responsive watch-right" alt="not found" src="static/{{p.photo}}"

edited Nov 14 '19 at 04:39

Usman Maqbool

3,351
10
31
48

answered Mar 14 '16 at 08:37

Jigar Tarpara

59
1
10

how to display image to template from imagefield in django

4 Answers4