Django - Static file, image, wont appear - django

I'm learning django. It was working in the beginning of my project, but now imgs from static just dont appear.
I've try to run collecstatic, work with STATIC_ROOT, other images and so on.
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
MEDIA_URL = '/upload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload')
Home.html
{% load static %}
<img scr="{% static 'img/cart-icon.png' %}">
Files dir

{% load static %}
<img src="{% static 'img/cart-icon.png' %}">
src not scr

Related

Django can't load media image if DEBUG = False (WARNING:django.request:Not Found: /media/cache/)

User uploaded media images are not loading unless I have DEBUG set to True in my settings file. I'm getting the following error in my logs:
WARNING:django.request:Not Found: /media/cache/ae/d2/aed2b5f7dcd26e01a2a9721540ee6e8e.jpg
That exact folder path does exist locally and that image file does exist. I'm pretty lost what to do from here. I read all the other answers with similar questions and tried everything. If I set DEBUG = True, the images load just fine in both local dev and Heroku environments. Once DEBUG = False, the images don't load in either environment.
Here's my code:
settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
#STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.StaticFilesStorage'
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
urls.py
urlpatterns = [ ... ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
html template:
{% load static %}
{% load thumbnail %}
{% thumbnail profile.profile_image "168x168" as im %}
{{im.url}}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="profile image" class="avatar avatar-xl mb-4">
{% empty %}
<img src="{% static 'assets/img/icons/theme/general/user.svg' %}" alt="Confirmation Icon" class="icon bg-primary" data-inject-svg="data-inject-svg">
{% endthumbnail %}
im.url does produce the correct file path to the image. Any ideas? Thanks!

load picture from static file django

Django is not loading my static files. I'm trying to load an image from the static folder, but it doesn't work.
file.html
<body>
{% load static %}
<img src="{% static "products/logo.jpg" %}" alt="My image">
</body>
structure
app
|_______products
|_________templates
|_________file.html
|_________models.py
|_________ ...
|______static
|_________products
|_________logo.jpg
settings
...
INSTALLED_APPS = [
...
'django.contrib.staticfiles',
...
]
...
STATIC_URL = '/static/'
You need to put this in your settings.py file:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
<!DOCTYPE html>
<html>
<head>
{% load static %}
</head>
<body>
<img src="{% static "products/logo.jpg" %}" alt="My image">
</body>
</html>
settings:
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [STATIC_DIR, ]

How Images can be added to HTML in Django, As i tried by static folder but still not getting image on html page

STATIC_URL = '/static/'
{% load static %}
Why this is not working in my case ... ?
Since you don't offer any code I will provide you the basic approach:
html
{% load static %}
<img src="{% static 'images/justinbieber_avatar.png' %}">
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
with a directory project/static/images/justinbieber_avatar.png
Make sure to run
$ py manage.py collectstatic
if in production.

media folder images are not displaying in Template Page

I'm new to Django. Medial folder images are not displaying in Template file. please help me in that.
models.py
class Images(models.Model):
image = models. ImageField(upload_to='images', blank=True, null=True)
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
urls.py
urlpatterns = [
......
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
views.py
def image_display(request):
image_obj = Images.objects.all()
return render(request, 'index.html', {'image_obj': image_obj})
index.html
<body>
{% for item in myoffers_objs %}
<div>
<img src="{{ item.image.url }}" alt="Images"/>
</div>
{% endfor %}
</body>
Project details where i did mistake. why its displaying like this.
Image displaying like this
The for loop in the template file is incorrect.
Try this
<body>
{% for item in image_obj %}
<div>
<img src="{{ item.image.url }}" alt="Images"/>
</div>
{% endfor %}
</body>
correct static_root:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
you have to add this to your html file if you use statics in that html:
{% load staticfiles %}
also you have to run this command to collect static files in your project:
python manage.py collectstatic

django-compressor CommandError: An error occurred during rendering file/path.html: Invalid class path 'css'

I'm trying to use django-compressor for my project. So far in my development environment, when I run python manage.py compress I been get this error CommandError: An error occurred during rendering D:path/to/a/template.html: Invalid class path 'css'
I have lots of template files spread across many apps. The error pops up randomly, pointing to a different template each time I run python manage.py compress.
I have also tried first running python manage.py collectstatic, but to no avail and nothing in the docs seem to mention this error
OS: Windows 10, Django==2.0.5, django-compressor==2.2
Relevant settings.py section below
DEBUG = True
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
COMPRESS_ROOT = STATIC_ROOT
COMPRESS_URL = STATIC_URL
COMPRESS_PARSER = 'compressor.parser.HtmlParser'
COMPRESS_ENABLED = True
COMPRESS_OFFLINE = True
COMPRESS_OFFLINE_MANIFEST = 'compressor_manifest.json'
COMPRESS_CSS_FILTERS = {
'css': ['compressor.filters.css_default.CssAbsoluteFilter'],
'js': ['compressor.filters.jsmin.JSMinFilter']
}
COMPRESS_PRECOMPILERS = (
('text/x-scss', 'django_libsass.SassCompiler'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
)
Inside the <head></head> tag of my project's base.html template I have
{% load compress %}
{% load staticfiles %}
{% load static %}
{% compress css file %}
<link rel="stylesheet" href="{% static 'css/fname.css' %}">
{% endcompress %}
{% compress js file %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'js/fname.js' %}"></script>
{% endcompress %}
You must define COMPRESS_FILTERS instead of COMPRESS_CSS_FILTERS as the latter is only a backwards-compatible alias for the css key of the former. That is, your configuration should read:
COMPRESS_FILTERS = {
'css': ['compressor.filters.css_default.CssAbsoluteFilter'],
'js': ['compressor.filters.jsmin.JSMinFilter']
}