djangoに画像が表示されない

私はこの製品モデルを持っています：

class Product(models.Model):
    category = models.ForeignKey(Category,
                                 related_name='products',
                                 on_delete=models.CASCADE)
    name = models.CharField(max_length=200, db_index=True)
    slug = models.SlugField(max_length=200, db_index=True)
    image = models.ImageField(upload_to='products/%Y/%m/%d',
                              blank=True)
    description = models.TextField(blank=True)
    price = models.DecimalField(max_digits=10, decimal_places=2)
    available = models.BooleanField(default=True)
    created = models.DateTimeField(auto_now_add=True)
    updated = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ('name',)
        index_together = (('id', 'slug'),)

    def __str__(self):
        return self.name

    def get_absolute_url(self):
        return reverse('shop:product_detail',
                       args=[self.id, self.slug])

そしてproduct_list、すべての製品が表示されるこのビュー：

def product_list(request, category_slug=None):
    category = None
    categories = Category.objects.all()
    products = Product.objects.filter(available=True)
    if category_slug:
        category = get_object_or_404(Category, slug=category_slug)
        products = products.filter(category=category)
    return render(request, 'shop/product/list.html',{
        'category':category,
        'categories':categories,
        'products':products
    })

そしてこれはlist.htmlテンプレートです：

{% extends "shop/base.html" %}
{% load static %}
{% block title %}
{% if category %}{{ category.name }}{% else %}Products{% endif %}
{% endblock %}
{% block content %}
<div id="sidebar">
    <h3>Categories</h3>
    <ul>
        <li {% if not category %}class="selected" {% endif %}>
            <a href="{% url "shop:product_list" %}">All</a>
        </li>
        {% for c in categories %}
        <li {% if category.slug == c.slug %}class="selected" {% endif %}>
            <a href="{{ c.get_absolute_url }}">{{ c.name }}</a>
        </li>
        {% endfor %}
    </ul>
</div>
<div id="main" class="product-list">
    <h1>{% if category %}{{ category.name }}{% else %}Products
        {% endif %}</h1>
    {% for product in products %}
    <div class="item">
        <a href="{{ product.get_absolute_url }}">
            <img src="{% if product.image %}{{ product.image.url }}{%
else %}{% static "img/no_image.png" %}{% endif %}">
        </a>
        <a href="{{ product.get_absolute_url }}">{{ product.name }}</ a>
            <br>
            ${{ product.price }}
    </div>
    {% endfor %}
</div>
{% endblock %}

私が欲しいのは、product_listページにすべての製品が価格、名前、画像とともに表示されることです。画像が表示されないことを除いて、すべてが正常に機能します。どの画像を撮ろうとしても、常にalt画像のテキストが表示されます。私が設定しているMEDIA_ROOTとMEDIA_URL、私の中にsettings.py：

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

また、imageモデルフィールドで指定されたフォルダも作成され、画像が保存されます。では、どこに問題があるのでしょうか。