When loading large images (600x300px) in Django, extra styling is added preventing the image from being displayed.
page.html
<img src="{{article.image.url}}">
The output, when inspected through Google Chrome:
<img src="/media/img/600x160_1.png" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 0px 0px;" width="0" height="0">
I cannot find any reason for this occurring and when I replace the image with a smaller sized one (300x150px) it loads fine without the extra styling content.
I am using bootstrap, but removing all the css and javascript files still results in the same error. I am using imagekit to upload the images and have Pillow installed in my local env too.
I discovered the issue causing this:
Duplicate uploaded images on my test server ( I was using the same image ) was causing an error.
The output img src was:
<img src="/media/img/600X160_1.png">
When I removed the "_1" from this, it solved the problem:
<img src="/media/img/600X160.png">
By preventing duplicate file names (I added the upload time to the end of the image) I solved this peculiar issue.