ruby on rails - Parallax.js images render locally but not in production on Heroku -
disambiguation: there 2 popular plugins called "parallax.js". i'm referring this one.
in development, parallaxed , non-parallaxed images work in erb template. in production (on heroku), non-parallaxed images rendering. suspect problem rails asset pipeline, recommended fixes haven't worked (see below).
the parallax.js docs suggest following usage:
<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div> but in order use asset pipeline, i've changed to:
<div class="parallax-window" data-parallax="scroll" data-image-src="<%= image_url('image_file.jpeg') %>"></div> (in addition image_url, i've tried image_tag , image_path.)
as mentioned, works fine on local machine.
but in production, chrome browser console logs errors missing images: failed load resource: server responded status of 404 (not found)
so went down rabbit hole:
other pages (ie: here , 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, , not resolve problem. former command yields following error:
devise.secret_key not set. please add following devise initializer: config.secret_key = (... , on) using heroku console ensured proper values present env['secret_key'] , env['secret_key_base'].
in devise.rb, have: config.secret_key = env['secret_key_base'] if rails.env == 'production'
in production.rb have:
config.serve_static_assets = true config.assets.compile = true config.assets.digest = true
this might more info necessary i've included since seems related.
thank you.
path used server run search
your server not find file path giving him please let's tell searching console in both production , development type
rails.application.config.assets.paths then evaluate difference in paths, because server going search asset
the file not exist in production
if set in development parameter false, may not work in development, demonstrating server not finding image in environment , falling file in app/assets
config.assets.unknown_asset_fallback = false i wonder file present in git repository? because uploading production through git, can check file in git repository under public/assets can go website, example https://sprachspiel.xyz has image
<img class="image_inverted" src="/assets/building-14c0a7cb155ad93ffbad41ab5ecb491691f2fc34684c7aa5735fedc659f99f76.svg" alt="building"> and can display asset following path:
https://sprachspiel.xyz/assets/building-14c0a7cb155ad93ffbad41ab5ecb491691f2fc34684c7aa5735fedc659f99f76.svg if can not find fingerprinted file in git repository or can not display on server/domain, mean development server using 1 in app/assets folder , file has not been precompiled/fingerprinted
so need make sure when precompile development
rails assets:precompile that include fingerprinted files in git repository
git add . then need check files added
git status should show in green new precompiled files, include application-fingerprint.js .scss , images
then need commit
git commit -m 'assets precompile' and push production git push heroku master
now on heroku host have same files git repository, should check heroku log in details , seeing file being uploaded, can go on app domain , should able display files if go @ example
https://sprachspiel.xyz/assets/application-461aa436b906133a708293d3f509c1908b34cf5b3d06c38332fcd7a5d75648a9.js the problem of can see git repository
https://github.com/fabriziobertoglio1987/sprachspiel/tree/master/public/assets
i have many application.js , scss, , same version of same images different fingerprints. why tell delete folder rm -r public/assets, git add ., git commit -m 'deleted assets', push both github , heroku
because confusing have many versions of same file different fingerprints, because heroku upload 1 file application.js, scss , each image based on settings included in sprockets-manifest-fingerprint.json
which includes 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":...} 
Comments
Post a Comment