0

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.

phalt
  • 1,244
  • 1
  • 10
  • 21
  • Where is the logic that adds the extra styling? – Paulo Bu May 27 '13 at 16:06
  • There is no logic that adds extra styling, it is just appearing out of nowhere. Chrome inspector includes it in the "element.styling" section, I cannot find any trace of the origin at all. – phalt May 27 '13 at 16:14
  • Add some more context surrounding the `img` tag please. Are you sure there's absolute no javascript nor css when the page loads? – Paulo Bu May 27 '13 at 16:18
  • I have added the img tag? The top code section is in the html file, the second is the output when rendered. – phalt May 27 '13 at 16:37
  • Yes I can see that, what I mean is to add more code surrounding the img tag, the elements enclosing it. – Paulo Bu May 27 '13 at 16:39
  • It sounds like Django is not the culprit here, but a JS library or CSS file. To verify this, use the "view source" option in Chrome to inspect the source code as sent by Django. – Krumelur May 27 '13 at 18:52

1 Answers1

0

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.

phalt
  • 1,244
  • 1
  • 10
  • 21
  • It's likely that this was not the issue but rather an adblocker preventing you from seeing the image. See http://stackoverflow.com/questions/13980272/images-not-appearing-on-site-accessible-directly-through-url – Corentin S. Mar 25 '14 at 09:52