I have a Rails 4 app. HTML for it is already built, so I would like to use tags that I already have (everything works locally). But when I deploy my app to Heroku, none of the images are displayed.
Example of my current image tag:
<img src="/assets/blog/post_images/1.png">
How should I change it so that Heroku knows where to look (I've tried many!)?
Or what are the proper steps to 'precomplile' images? This is the solution I use now:
config.assets.compile = true
config.serve_static_assets = true
It does work (all images are displayed), but I heard that it makes app in production slower.
EDIT
CSS and Javascript files are found just fine interestingly. I thought maybe it has something to do with this file (config/initializers/assets.rb):
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( blog_posts.css )
These are my contents. Should this file mention images may be?
Related
I had this weird problem of identical PNG images created with drf-extra-fields's Base64ImageField with different file names not being loaded.
Problem persists both in Django development server and nginx serving the image files so I don't think it is specific to Django or nginx.
I experimented with different file names and some work and some don't:
0-ad0.png # Doesn't work
a-ad0.png # Doesn't work
aaaaaa-ad0.png # Doesn't work
0-ae0.png # Works
0-bd0.png # Works
0-ada.png # Works
a-ad.png # Works
a-ad00.png # Works
As far as I can tell, if the file name fits this regular expression, it is not loaded: /.*-ad[0-9]\.png/ Did anyone encounter such a thing? What could be the reason for this?
EDIT: here's what firefox is showing me:
Do you have an ad blocker enabled? "-ad0." is in the adblock plus list.
I have simply tried setting up flask-assets (based on webassets), however just can't get it to work.
I have the standard setup;
python virtualenv
pip to install the bare essentials (flask, flask-assets)
sass ruby gem (for trying sass / scss)
less via npm (for trying lesscss)
jsmin via pip (for trying jsmin)
Config:
I have created a working homepage in Flask
static folder created (for css / js assets)
The css / js files are confirmed working (css background, js slider, etc)
Basically my development non-flask-assets site is working perfectly
I have followed the easy official guide here: flask-assets usage.
I fully understand how to work with it (as per that page). I have even exact copy-pasted the code, & still can't get it working.
Some code I've tried (for lesscss): (of course I have working css in main.less)
from flask.ext.assets import Environment, Bundle
assets = Environment(app)
assets.debug = True
lesscss = Bundle('main.less', output='main.css', filters='less')
assets.register('less', lesscss)
Then in my template:
{% assets "less" %}
<link href="{{ ASSET_URL }}" rel="stylesheet">
{% endassets %}
However flask-assets just won't work. I've tried the same with sass, scss, & also jsmin (exact code copy-paste from the usage guide) - it still won't work.
I notice that the .webassets-cache folder is created, but is (always) empty...
Also; relevant error?; I expect it to create the main.css, but as it doesn't, I get an error in the browser (using app.debug = True & flask's built-in dev server):
webassets.exceptions.BuildError
BuildError: Nothing to build for <Bundle output=css/main.css, filters=[<webassets.filter.less.Less object at 0x7f4958dc6710>], contents=('css/main.less',)>, is empty
So; If I manually create an empty main.css, it loads the page (no error), however the main.css file is not filled with css so flask-assets / webassets in still not working.
I've also tried passing the assets object to the template in various ways just in case it's needed (although no documentation states this) - that didn't work.
It's been driving me crazy. Any pointers would be appreciated.
Thank you
There is info missing on the Flask-Assets docs.
You problem is either the sass_bin config or the enviroment load path.
You should try both, in my case it was the config. See below my working config.
PS: IMHO Flask Assets is neither very complete nor well documented. It also consumes you application runtime, which sucks both on debugging and production. I have switched to GULP!
env = Environment(app)
env.config['sass_bin'] = '/usr/local/bin/sass'
# env.load_path = [os.path.join(os.path.dirname(__file__), 'sass')]
js = Bundle('js/jquery/jquery-2.1.4.js', 'js/angular/angular.js',
'js/socketio/socket.io.js', filters='jsmin', output='js/all_min.js')
env.register('js_all', js)
myjs = Bundle('myjs/Interpolation.js', 'myjs/socketio.js' , filters='jsmin', output='myjs/all_min.js')
env.register('myjs_all', myjs)
css = Bundle('sass/base.sass', filters='sass', output='css/base.css')
env.register('css_all', css)
The Ember CLI guide describes how assets can be referenced in the templates and the CSS - but what is the proper way of referencing an asset (say an image) from my javascript code?
Specifically I am concerned about the asset path getting fingerprinted correctly when building assets for production. It seems like ember-cli is using broccoli-asset-rev for this, but according to its documentation, only <script> tags in the HTML and url() in CSS will be fingerprinted. Is there any way (probably through another broccoli plugin) to get asset paths in the .js files fingerprinted, too?
I placed an image called car.jpeg under public/assets/images and then was able to reference it in my application.js route file as assets/images/car.jpeg
Works great
UPDATE
One picture is worth a thousand words... :)
I found the issue. This works out of the box as expected - it turned out that my asset (image) was not in the right location, so occurrences of it's path in the JS files never got replaced with the fingerprinted version.
I use stylus and coffeeScript with django compressor, and It works perfectly in Dev. Here is my Jade template:
- load compress
!!! 5
html
head
title Super Page
- compress css
link(rel='stylesheet',type='text/stylus',href='{{STATIC_URL}}styles/base.styl')
link(rel='stylesheet',type='text/stylus',href='{{STATIC_URL}}styles/style.styl')
- endcompress
- compress js
script(type='text/coffeescript',src='{{STATIC_URL}}app/coolscript.coffee')
script(type='text/coffeescript',src='{{STATIC_URL}}app/evencooler.coffee')
- endcompress
body
block content
For deployment I use Heroku and Amazon S3 for static files. Once deployed I visit the site and the page loads fine and styles look as expected but the scripts are not working.
Checking the <head> I see the styles were compressed into one css file but the coffeeScript files were not. The browser is fetching the CS source files:
<script type="text/coffeescript" src="http://supercoolapp.s3.amazonaws.com/static/app/coolscript.coffee"></script>
<script type="text/coffeescript" src="http://supercoolapp.s3.amazonaws.com/static/app/evencooler.coffee"></script>
I
It was working before, I had this problem once but I don't remember what was the cause, I think the compile process is failing silently and I don't know how to debug it.
It was a not so easy to find coffeeScript problem. In my machine I was using coffeescript v1.4.X and heroku was using v1.6.3. I had a for own in array that v.1.4 allowed(it shouldn't) but v1.6.3 didn't(actually it didn't show the right error but a different one which is a bug shown here).
Anyway I solved the problem fixing the coffee file but I still think its a compressor error not to fail in production ignoring errors without giving any clue of what happened.
My Django 1.1 app uses dynamic images.
I'm confused about why the path generated from my template tag:
{{image_product.photo.path}}
looks correct, but does not display the requested image.
This generates a path that works:
src='/media/{{image_product.photo}}' => <img src='/media/lcdtvs/product1.jpg'>
This DOES NOT work:
src='{{image_product.photo.path}}' => <img src='/Users/Bryan/work/review_app/media/lcdtvs/product1.jpg'>
I checked to confirm that the Absolute path generated from MEDIA_ROOT is correct on my computer and it works fine.
Why would the image not display correctly?
Two things to keep in mind:
What you want is the {{image_field.url}} method (not the path).
If it still is 404, either you need to setup your server correctly, or if you are using the development server you need to enable it to server static files.
Not familiar with Django, but I'd guess you need to have file:///Users/... in the second snippet.