为什么我的媒体库中的图像没有显示在我的主页中？答案

【问题标题】：Why aren't the images from my media library showing in my home page?为什么我的媒体库中的图像没有显示在我的主页中？
【发布时间】：2019-10-08 17:11:49
【问题描述】：

我将图像包含在我的数据库中并将图像存储在媒体目录中。当我从数据库访问我的数据时，所有信息都已加载，但我的图像未显示。有人可以帮帮我吗？

这是我的 index.html 文件：

{% block body %}
{% load static %}
<div class="container">
    <h1>Men Fashion</h1>
<div id="demo" class="carousel slide my-3" data-ride="carousel">
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>

       {% for i in range %}
      <li data-target="#demo" data-slide-to="{{i}}" ></li>
      {% endfor %}
    </ul>

    <!--Slideshow starts here -->
    <div class="container carousel-inner no-padding">

      <div class="carousel-item active">
        <div class="col-xs-3 col-sm-3 col-md-3">
          <div class="card" style="width: 18rem;">
            {% load static %}
            <img src='/media/{{product.0.image}}' class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">{{product.0.product_name}}</h5>
                <p class="card-text">{{product.0.desc}}</p>
                <a href="#" class="btn btn-primary">Add to Cart</a>
            </div>
          </div>
       </div>


        {% for i in product|slice:"1:"%}
        <div class="col-xs-3 col-sm-3 col-md-3">
          <div class="card" style="width: 18rem;">
            <img src='/media/{{i.image}}' class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{i.product_name}}</h5>
              <p class="card-text">{{i.desc}}</p>
              <a href="#" class="btn btn-primary">Add To Cart</a>
            </div>
          </div>
        </div>
        {% if forloop.counter|divisibleby:3 and forloop.counter > 0 and not forloop.last %}
      </div><div class="carousel-item">
        {% endif %}

        {% endfor %}
    </div>



</div>
</div>
    <!-- left and right controls for the slide -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>


 {% endblock %}

</div>

这是我在项目中包含的 models.py 文件：

from django.db import models

# Create your models here.

class Product(models.Model):
    product_id = models.AutoField
    product_name = models.CharField(max_length=50)
    category = models.CharField(max_length=50, default="")
    subcategory = models.CharField(max_length=50, default="")
    price = models.IntegerField(default=0)
    desc = models.CharField(max_length=300)
    pub_date = models.DateField()
    image = models.ImageField(upload_to='shop/images', default="")

    def __str__(self):
        return self.product_name

这是我的 setting.py 文件：

STATIC_URL = '/static/'

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

【问题讨论】：

我需要从我的 django 数据库中访问我的图像。但它显示错误加载资源失败：服务器响应状态为 404（未找到）

标签： python django

【解决方案1】：

我对此了解不多，但是.. 请看这里： Django image src not found

与您类似的问题，已通过代码更正。在您的 model.py 代码中，您说：

image = models.ImageField(upload_to='shop/images', default="")

在你的settings.py 中你有：

STATIC_URL = '/static/'

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

我看不到您在哪里声明图像的路径。为你的settings.py 试试这个代码，看看什么对你有用。

from django.core.files.storage import FileSystemStorage
from django.conf import settings


image_storage = FileSystemStorage(
    # Physical file location ROOT
    location=u'{0}/my_sell/'.format(settings.MEDIA_ROOT),
    # Url for file
    base_url=u'{0}my_sell/'.format(settings.MEDIA_URL),
)


def image_directory_path(instance, filename):
    # file will be uploaded to MEDIA_ROOT/my_sell/picture/<filename>
    return u'picture/{0}'.format(, filename)


class Goods(models.Model):
    pic = models.ImageField(upload_to=image_directory_path, storage=image_storage)

欲了解更多信息，请参阅： Django image src not found

希望对你有帮助。

【讨论】：

【解决方案2】：

首先，您应该仔细检查您的图片实际上传到的位置。

基于 ImageField，我猜您想将产品图片存储到 media/shop/images。但是，在您的模板中，您调用 /media/{{product.0.image}}，它将在 media/media/shop/images 中查找图像。

其次，请记住搜索图像的路径，而不仅仅是图像本身。所以试试这个：

<img src="{{product.0.image.url }}" class="card-img-top" alt="...">

【讨论】：