1

Disambiguation: There are two popular plugins called "parallax.js". I'm referring to this one.

In development, parallaxed and non-parallaxed images work perfectly in my ERB template. But in production (on Heroku), only the non-parallaxed images are rendering. I currently suspect my problem is with the Rails asset pipeline, but the recommended fixes haven't worked (see below).

The parallax.js docs suggest the following usage: 

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>

But in order to use the asset pipeline, I've changed it to: 

<div class="parallax-window" data-parallax="scroll" data-image-src="<%= image_url('image_file.jpeg') %>"></div>

(In addition to image_url, I've also tried image_tag and image_path.)

As mentioned, this all works just fine on my local machine.

But in production, the Chrome browser console logs errors for the missing images: Failed to load resource: the server responded with a status of 404 (Not Found)

So I went down the rabbit hole:

Other SO pages (ie: here and here) suggest doing variations of rake assets:precompile RAILS_ENV=production or heroku run rake assets:precompile.

The latter command spends several minutes compiling unrelated css & js assets, and does not resolve the problem. The former command yields the following error:

Devise.secret_key was not set. Please add the following to your Devise initializer:

  config.secret_key = (... and so on)

Using the heroku console I ensured proper values ARE present for ENV['SECRET_KEY'] and ENV['SECRET_KEY_BASE'].

In my devise.rb, I have: config.secret_key = ENV['SECRET_KEY_BASE'] if Rails.env == 'production'

In production.rb I have:

config.serve_static_assets = true config.assets.compile = true config.assets.digest = true

This might be more info than necessary but I've included this since it all seems related.

Thank you.

Jonathan Dueck
  • 41
  • 10
  • Hi, I am wondering what is the path used from Rails in Development. Maybe in development it works because it is not using the file from `public/assets/` but from `app/assets`. So just check your images both in development and in production, with `ctrl + shift + c` you can target an html element and see how it looks like, you need to check for the following html `` and see how is that `src` attribute...because the `src` attribute may be the reason it is not working in production. – Fabrizio Bertoglio Sep 14 '17 at 10:47
  • @FabrizioBertoglio Thanks, this gets me closer. In development, the url has asset pipeline fingerprinting and in production it does not. DEV: http://localhost:3000/assets/filename-fingerprint.jpg PROD: http://example.com/images/filename.jpg. – Jonathan Dueck Sep 14 '17 at 18:24

1 Answers1

0

Path used from Server to run the search

Your server does not find the file with the path your are giving him so please let's tell us where you are searching by with the console in both production and development type 

Rails.application.config.assets.paths

Then evaluate any difference in those paths, because that is where the server is going to search for your asset

The file does not exist in production

If you set in development this parameter to false, it may also not work in development, demonstrating that the server is not finding the image also in that environment and is falling back to the file in app/assets

config.assets.unknown_asset_fallback = false

I wonder is the file present in your git repository? Because you are uploading to production through git, so you can check the file in your git repository under public/assets then you can go to your website, for example https://sprachspiel.xyz has an image 

<img class="image_inverted" src="/assets/building-14c0a7cb155ad93ffbad41ab5ecb491691f2fc34684c7aa5735fedc659f99f76.svg" alt="Building">

and I can display the asset with the following path:

https://sprachspiel.xyz/assets/building-14c0a7cb155ad93ffbad41ab5ecb491691f2fc34684c7aa5735fedc659f99f76.svg

if you can not find the fingerprinted file in your git repository or you can not display it on your server/domain, it mean that the development server is just using the one in the app/assets folder and the file has not been precompiled/fingerprinted

so you need to make sure when you precompile development

rails assets:precompile

that you include those fingerprinted files in your git repository

git add .

then you need to check the files added

git status

should show in green the new precompiled files, so it will include some application-fingerprint.js .scss and also some images

then you need to commit

git commit -m 'assets precompile'

and push to production git push heroku master

Now on your heroku host you have exactly the same files from your git repository, you should check the heroku log in details and seeing what file are being uploaded, then you can go on your app domain and should be able to display all the files if you go at for example

https://sprachspiel.xyz/assets/application-461aa436b906133a708293d3f509c1908b34cf5b3d06c38332fcd7a5d75648a9.js

The problem of this is that as you can see from my git repository

https://github.com/fabriziobertoglio1987/sprachspiel/tree/master/public/assets

I have many application.js and scss, and same version of the same images with different fingerprints. That is why sometimes they tell you to delete the folder with rm -r public/assets, git add ., git commit -m 'deleted assets', then push to both github and heroku

Because it is confusing to have some many versions of the same file with different fingerprints, because heroku will only upload 1 file for application.js, scss and each image based on the settings included in the sprockets-manifest-fingerprint.json

which includes the fingerprint name of every file

{"files":{"anvil-24236-40f6914d480cedd181af319818100046542752b1af2618a9540560b9fe17441f.svg":{"logical_path":"anvil-24236.svg","mtime":"2017-06-19T00:05:49+07:00","size":3886,"digest":"40f6914d480cedd181af319818100046542752b1af2618a9540560b9fe17441f","integrity":"sha256-QPaRTUgM7dGBrzGYGBAARlQnUrGvJhipVAVguf4XRB8="},"anvil-4e059374f73b4972cad762b9ab5326dfce178997ad7dc902e5fd50c0db019c3d.svg":...}

https://github.com/fabriziobertoglio1987/sprachspiel/blob/master/public/assets/.sprockets-manifest-b19e945ef55d302416370238b2625751.json

Fabrizio Bertoglio
  • 5,890
  • 4
  • 16
  • 57