Question

Essentially my problem is that a page loads fine and looks normal. After about 30 seconds it suddenly disappears.

Here's the server log before the error (as loading the page):

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

And then suddenly the image dissappears with the client side error (seen in Chrome's dev console):

Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH
  http://localhost:3000/assets/taylor.jpg

And the only addition to the log is:

Started GET "/assets/favicon.ico" for 127.0.0.1 at 2014-03-11 23:54:00 -0400

During the 30 seconds of it looking good, chrome has a loading symbol where the favicon goes

My html is rather simple at this point:

<div class="home-images">
  <%= image_tag "taylor.jpg", class: "home-image" %>
  <%= image_tag "wide.jpg", class: "home-image hide" %>
  <%= image_tag "sad.jpg", class: "home-image hide" %>
</div>

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...

When I switched the html, it was the same image (taylor) that gave the error:

<div class="home-images">
  <%= image_tag "wide.jpg", class: "home-image" %>
  <%= image_tag "taylor.jpg", class: "home-image hide" %>
  <%= image_tag "sad.jpg", class: "home-image hide" %>
</div>

All my images are located in my app/assets/images folder

My header looks like this:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enchanting Events and Design</title>
  <%= favicon_link_tag       "favicon.ico" %>
  <%= stylesheet_link_tag  "application" %>
  <%= javascript_include_tag  "application" %>
  <%= csrf_meta_tags %>
</head>
Was it helpful?

Solution 2

I had this issue when I replaced an image using the mv command. This left the timestamp untouched, so it broke the asset caching. A simple touch of the affected file fixed it.

OTHER TIPS

Ran into the same issue when I edited my image size.

None of the above solutions worked for me, but rake tmp:clear did!

Try "rake assets:clean" and rebuild your asset(if you need). I got working by this magic.

This may be a symptom of another problem with nginx. Please see this article:

Rails image disappears with error: Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH

I saw the same issue as you, and it turned out to be an nginx permission issue with the underlying cache directory which also caused the problem to be somewhat intermittent.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top