Images not loading correctly


Hi everyone! First post here. Please excuse my rookie question. I am building my very first site for my first client and I am using Django for the first time. I am experiencing a bug where my product photos that have been uploaded through the admin will randomly fail to load dynamically. It only happens like once every 10-20 page loads and a refresh of the page will fix the issue. I don’t want to give my client a site that fails to load randomly. Does anyone have any advice on how to fix this? Thanks in advance!


How the page normally loads and how it looks after a refresh when the images fail to load.

You don’t specify here what you mean by “fail to load dynamically”. How are you loading these images?

One thing to check is the network tab in the browser’s developer tools to see if the requests are being made or if you’re getting 404’s when trying to request the image. That’ll help determine if the problem is in the browser or on the server.

Otherwise, we’ll need a lot more detail about how you’re creating the pages, any javascript involved with this, templates, views, models, etc. Also a description of how you’re running this - if this error is just occurring when using runserver or if it’s happening in a more production style deployment. Whether or not it’s the same image not being loaded or different images at different times.

Hi, I’ll try to elaborate. I am not using any JavaScript. I have a product model with five attributes. Image, Title, Description, Category, and Industry. The image is an ImageField() that is uploaded from the admin site. I am using a class view with a queryset to get all products or products from a category or industry. I am then using {% for instance in object_list %} to create the div and layout for each item. This works perfectly 99% of the time. This is all done with runserver on local host. I have had it happen on my Mac and on my phone, using multiple browsers. Here is the text from the console when the error occurs. The two lines at the very bottom show the photos that fail to load I believe.

[20/Aug/2021 01:41:37] “GET /mobile-header HTTP/1.1” 200 6575
[20/Aug/2021 01:41:37] “GET /footer HTTP/1.1” 200 183
[20/Aug/2021 01:41:42] “GET /products HTTP/1.1” 200 6336
[20/Aug/2021 01:41:42] “GET /static/css/products.css HTTP/1.1” 304 0
[20/Aug/2021 01:41:42] “GET /header HTTP/1.1” 200 4505
[20/Aug/2021 01:41:42] “GET /header HTTP/1.1” 200 4505
[20/Aug/2021 01:41:42] “GET /mobile-header HTTP/1.1” 200 6575
[20/Aug/2021 01:41:42] “GET /footer HTTP/1.1” 200 183
[20/Aug/2021 01:41:45] “GET /products/all-products HTTP/1.1” 200 4062
[20/Aug/2021 01:41:45] “GET /header HTTP/1.1” 200 4505
[20/Aug/2021 01:41:45] “GET /mobile-header HTTP/1.1” 200 6575
[20/Aug/2021 01:41:45] “GET /footer HTTP/1.1” 200 183
Internal Server Error: /media/product-images/product-test_faescbs.jpg
Traceback (most recent call last):
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/core/handlers/exception.py”, line 47, in inner
response = get_response(request)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 12, in call
return self.process_response(request, response)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 16, in process_response
if settings.DEBUG and ‘text/html’ in response[‘Content-Type’]:
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/http/response.py”, line 178, in getitem
return self.headers[header]
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/utils/datastructures.py”, line 316, in getitem
return self._store[key.lower()][1]
KeyError: ‘content-type’
Internal Server Error: /media/product-images/product-test_QTxk9zs.jpg
Traceback (most recent call last):
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/core/handlers/exception.py”, line 47, in inner
response = get_response(request)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 12, in call
return self.process_response(request, response)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 16, in process_response
if settings.DEBUG and ‘text/html’ in response[‘Content-Type’]:
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/http/response.py”, line 178, in getitem
return self.headers[header]
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/utils/datastructures.py”, line 316, in getitem
return self._store[key.lower()][1]
KeyError: ‘content-type’
[20/Aug/2021 01:41:45] “GET /media/product-images/product-test_faescbs.jpg HTTP/1.1” 500 67366
Internal Server Error: /media/product-images/product-test_qW0jxnr.jpg
Traceback (most recent call last):
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/core/handlers/exception.py”, line 47, in inner
response = get_response(request)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 12, in call
return self.process_response(request, response)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 16, in process_response
if settings.DEBUG and ‘text/html’ in response[‘Content-Type’]:
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/http/response.py”, line 178, in getitem
return self.headers[header]
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/utils/datastructures.py”, line 316, in getitem
return self._store[key.lower()][1]
KeyError: ‘content-type’
[20/Aug/2021 01:41:45] “GET /media/product-images/product-test_QTxk9zs.jpg HTTP/1.1” 500 67366
[20/Aug/2021 01:41:45] “GET /media/product-images/product-test_qW0jxnr.jpg HTTP/1.1” 500 67366
Internal Server Error: /media/product-images/product-test_VYRgMRB.jpg
Traceback (most recent call last):
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/core/handlers/exception.py”, line 47, in inner
response = get_response(request)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 12, in call
return self.process_response(request, response)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 16, in process_response
if settings.DEBUG and ‘text/html’ in response[‘Content-Type’]:
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/http/response.py”, line 178, in getitem
return self.headers[header]
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/utils/datastructures.py”, line 316, in getitem
return self._store[key.lower()][1]
KeyError: ‘content-type’
Internal Server Error: /media/product-images/product-test_tnGQFSM.jpg
Traceback (most recent call last):
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/core/handlers/exception.py”, line 47, in inner
response = get_response(request)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 12, in call
return self.process_response(request, response)
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/livesync/core/middleware.py”, line 16, in process_response
if settings.DEBUG and ‘text/html’ in response[‘Content-Type’]:
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/http/response.py”, line 178, in getitem
return self.headers[header]
File “/Users/thaddeuskrugman/.local/share/virtualenvs/spectre-corp-django-back-end-IkoGURaT/lib/python3.9/site-packages/django/utils/datastructures.py”, line 316, in getitem
return self._store[key.lower()][1]
KeyError: ‘content-type’
[20/Aug/2021 01:41:45] “GET /media/product-images/product-test_VYRgMRB.jpg HTTP/1.1” 500 67366
[20/Aug/2021 01:41:45] “GET /media/product-images/product-test_tnGQFSM.jpg HTTP/1.1” 500 67366

That this is happening irregularly, leads me to believe there’s either a timing issue or a race condition being encountered.

I see where you’ve got a third-party package named “livesync” being used, and it’s in the traceback where this error is occurring. My first suggestion would be to try removing that package to see if it is at all responsible for this. (It’s where there is a reference to response['Content-Type'], and the exception is identifying a KeyError with content-type.)

Thanks you very much for the advice. I will try removing that first and see if that fixes the issue.

Thaddeus Krugman