如何从Django的ImageField中显示图像到模板

Question

我的模板无法显示来自我的模型的图片。

虽然 src 属性与相应字段匹配，但它并未显示正确的图片。

模板：

       <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>

模型：

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

视图：

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)

- Jigar Tarpara

---

p.p_name的值是否出现在HTML页面上？ - Harkirat Saluja

是的，它正在显示。 - Jigar Tarpara

可能是以编程方式将图像保存到Django ImageField的重复问题。 - SuReSh

Answer 1

你可以通过{{p.photo.url}}访问图像网址。但是在你的模型中，它应该像这样：

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

(blank=True)如果你想要使用这个功能，你可以像这样做：

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

- varnothing

---

不错的尝试。有一个问题：在关闭“{{p.photo.url}}”引号后，我收到了“标签未关闭”的语法错误。有什么想法吗？ - stelios

@chefarov，可能只是开闭引号不匹配的简单问题，因为您知道引号也像括号一样起作用。如果您可以分享您的代码，我可以查看一下。 - varnothing

Answer 2

尝试将您的代码更改为：

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

- ilse2005

---

{{ STATIC_URL }}显示的是什么？ - RodrigoDela

/home/lcom52/Desktop/happydeal/static_cdn {{ STATIC_URL }} - Jigar Tarpara

但是，如果我尝试通过此模型的ImageField上传图像，则可以成功上传。 - Jigar Tarpara

你对媒体设置有什么建议？ - Jigar Tarpara

好的，我试过了。 还有其他易于理解的可用选项吗？ - Jigar Tarpara

Answer 3

在您的本地服务器上

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

在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/" –

但也要调试 STATIC_ROOT 是否返回域名/图片链接

- SuReSh

Answer 4

这是解决我的问题的工作 这里“static”是我的媒体文件的根文件夹

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

- Jigar Tarpara