Note that there are some explanatory texts on larger screens.

plurals
  1. POImages don't resolve correctly using Rails asset pipeline in development mode
    primarykey
    data
    text
    <p><strong>TL;DR</strong> <code>asset_data_uri</code> works but <code>asset_path</code> does not.</p> <p>I recently switched from a homegrown + jammit asset pipeline over to the Rails asset pipeline in hopes that I could ditch a bunch of code and have most everything taken care of for me. I have everything working fine in production (unlike most people on stackoverflow), however, in development mode images won't show up.</p> <p><strong>I've noticed a few things.</strong></p> <ul> <li>In order to get images to show up correctly, I must precompile <em>in development mode</em> so they can be correctly referenced via css. Unfortunately, precompiling in dev mode precompiles javascript as well.</li> <li>When <em>not</em> precompiling in dev mode, images located in app/assets/images requested using <code>asset_data_uri()</code> show up fine. However, the same images using <code>asset_path()</code> do not. For example, in my initialize.css.erb file, <code>&lt;%= asset_data_uri "cork.bg.gif" %&gt;</code> displays fine, but <code>&lt;%= asset_path "cork.bg.gif" %&gt;</code> doesn't. This is because Rails resolves the path down to /assets/cork.bg.gif, and there's no image that lives in that location (i.e., public/assets/cork.bg.gif)</li> <li>Precompiling using <code>rake assets:precompile RAILS_ENV=development</code> gets me my images in the right spot so they can be served from public/assets, but it also stifles development because now changes to JS files are cached until I precompile again.</li> </ul> <p>So what can I do? Here is the related configuration. Let me know if there's anything else I can provide:</p> <p><strong>In application.rb:</strong></p> <pre><code>config.assets.enabled = true config.assets.version = '1.0' </code></pre> <p><strong>In development.rb:</strong></p> <pre><code>config.assets.compile = true config.assets.compress = false config.assets.debug = true </code></pre> <p>Note: I've read a bunch about <code>config.serve_static_assets</code> being involved. It's currently commented out in development.rb, so it's whatever the default version is on Rails 3.2.13.</p> <p><strong>An example: initialize.css.erb</strong></p> <p>My images are located in app/assets/images. The example image I'm using is located at app/assets/images/cork.bg.gif.</p> <p>Works:</p> <pre><code>body { background-image: url(&lt;%= asset_data_uri "cork.bg.gif" %&gt;); } </code></pre> <p>Doesn't work:</p> <pre><code>body { background-image: url(&lt;%= asset_path "cork.bg.gif" %&gt;); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload