title: Rails image disappears with error: Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
body: <p>Essentially my problem is that a page loads fine and looks normal. After about 30 seconds it suddenly disappears.  </p>
  
  <p>Here's the server log before the error (as loading the page):</p>
  
  <pre><code>Started GET "/" for 127.0.0.1 at 2014-03-11 23:53:30 -0400
  Processing by PagesController#home as HTML
    Rendered pages/home.html.erb within layouts/application (0.7ms)
    Rendered layouts/_head.erb (3.3ms)
    Rendered layouts/_header.erb (0.9ms)
    Rendered layouts/_footer.erb (0.2ms)
  Completed 200 OK in 11ms (Views: 10.5ms)
  
  Started GET "/assets/favicon.ico" for 127.0.0.1 at 2014-03-11 23:53:30 -0400
  
  Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2014-03-11 23:53:30 -0400
  
  Started GET "/assets/home.css?body=1" for 127.0.0.1 at 2014-03-11 23:53:30 -0400
  
  Started GET "/assets/taylor.jpg" for 127.0.0.1 at 2014-03-11 23:53:30 -0400
  
  Started GET "/assets/wide.jpg" for 127.0.0.1 at 2014-03-11 23:53:30 -0400
  
  Started GET "/assets/enchanted_large.png" for 127.0.0.1 at 2014-03-11 23:53:30 -0400
  
  Started GET "/assets/sad.jpg" for 127.0.0.1 at 2014-03-11 23:53:30 -0400
  </code></pre>
  
  <p>And then suddenly the image dissappears with the client side error (seen in Chrome's dev console):</p>
  
  <pre><code>Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
    http://localhost:3000/assets/taylor.jpg
  </code></pre>
  
  <p>And the only addition to the log is:</p>
  
  <pre><code>Started GET "/assets/favicon.ico" for 127.0.0.1 at 2014-03-11 23:54:00 -0400
  </code></pre>
  
  <p>During the 30 seconds of it looking good, chrome has a loading symbol where the favicon goes</p>
  
  <p>My html is rather simple at this point:</p>
  
  <pre><code>&lt;div class="home-images"&gt;
    &lt;%= image_tag "taylor.jpg", class: "home-image" %&gt;
    &lt;%= image_tag "wide.jpg", class: "home-image hide" %&gt;
    &lt;%= image_tag "sad.jpg", class: "home-image hide" %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I even took out my javascript completely. I tried removing turbolinks by itself too. It only happens to one image. And I have no idea why...</p>
  
  <p>When I switched the html, it was the same image (taylor) that gave the error:</p>
  
  <pre><code>&lt;div class="home-images"&gt;
    &lt;%= image_tag "wide.jpg", class: "home-image" %&gt;
    &lt;%= image_tag "taylor.jpg", class: "home-image hide" %&gt;
    &lt;%= image_tag "sad.jpg", class: "home-image hide" %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All my images are located in my app/assets/images folder</p>
  
  <p>My header looks like this:</p>
  
  <pre><code>&lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Enchanting Events and Design&lt;/title&gt;
    &lt;%= favicon_link_tag       "favicon.ico" %&gt;
    &lt;%= stylesheet_link_tag  "application" %&gt;
    &lt;%= javascript_include_tag  "application" %&gt;
    &lt;%= csrf_meta_tags %&gt;
  &lt;/head&gt;
  </code></pre>