Django does not see the static files images - django

Question

I'm trying to create an online store with Django. I want to add photos of goods, but Django for some reason does not see them. Please help to solve the problem.
Here is a screenshot of error:
here is settings.py
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = 'staticfiles'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
'../static/products/media/product_images/',
)
models.py
from django.db import models
# Create your models here.
class Product(models.Model):
name = models.CharField(max_length=70, blank=True, null=True, default=None)
price = models.DecimalField(max_digits=10, decimal_places=2, default=0)
description = models.TextField(blank=True, null=True, default=None)
short_description = models.TextField(blank=True, null=True, default=None)
is_active = models.BooleanField(default=True)
created = models.DateTimeField(auto_now_add=True, auto_now=False)
updated = models.DateTimeField(auto_now_add=False, auto_now=True)
def __str__(self):
return "%s, %s" % (self.price ,self.name)
class Meta:
verbose_name = 'Товар'
verbose_name_plural = 'Товары'
class ProductImage(models.Model):
product = models.ForeignKey(Product, blank=True, null=True, default=None, on_delete=models.CASCADE)
image = models.ImageField(upload_to='static/media/product_images/')
is_active = models.BooleanField(default=False)
is_main = models.BooleanField(default=True)
created = models.DateTimeField(auto_now_add=True, auto_now=False)
updated = models.DateTimeField(auto_now_add=False, auto_now=True)
def __str__(self):
return "%s" % self.id
class Meta:
verbose_name = 'Фотография'
verbose_name_plural = 'Фотографии'
main urls.py file
from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('online_shop.urls', namespace='online_shop')),
path('', include('products.urls', namespace='products')),
path('', include('orders.urls', namespace='orders')),
]
html template
{% extends 'online_shop/base.html' %}
{% load static %}
{% block content %}
<section>
<div class="top-section">
<img src="{% static 'img/clem.png' %}" class="img-fluid">
</div>
</section>
<section>
<div class="container">
<div class="row">
{% for product_image in product_images %}
<div class="col-lg-3">
<div class="product-item">
<div>
<img src="{{product_image.image}}" alt="" class="img-fluid">
</div>
<h4>{{product_image.product.name}}</h4>
<p>{{product_image.product.description|truncatechars_html:80 }}</p>
<div class="price">
{{product_image.product.price}} ГРН
</div>
<div class="add-to-card">
<button class="btn btn-success">
Добавить в корзину
</button>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endblock content %}

Answer 1

You may need to do some modifications
settings.py
# prefix used in static files path rendering
STATIC_URL = '/static/'
# store static files once execute python manage.py collectstatic
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles/')
# directories where static files are stored in the development environment
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
# prefix used upon uploaded images
MEDIA_URL = '/media/'
# where uploaded images should save
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
urls.py
# lets you have the ability to view images even in development environment
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
update:
Since you use static/media/product_images/ as upload path, the uploaded files will be saved in
project-root-dir/media/static/products/media/product_images
Hope this helps!

Answer 2

you can do this by adding the following snippet to your urls.py
from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('online_shop.urls', namespace='online_shop')),
path('', include('products.urls', namespace='products')),
path('', include('orders.urls', namespace='orders')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)