Django - loading large images includes extra styling

Question

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.

Answer 1

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.