How to address images in handlebars templates if the images are optimized with grunt-contrib-imagemin

Question

I have created an ember app with yeoman and generator-ember.

yo ember

I have placed my handlebars templates in app/templates and the images in app/images. if I run

grunt server

everything looks fine. If I run

grunt server:dist

everything looks fine instead of the images I have addressed in my handlebars templates. It seems that the task imagemin or something else renames the images from something like images/map.jpg to something like images/667de70e.map.jpg. The img tags in my index.html file are corrected. But the img tags in my handlebars files like templates/map.hbs are still addressing the old path images/map.jpg.

How can I fix the path problem in my handlebars files? Is there a helper?

Answer 1

This is due to the rev task defined within Gruntfile.js. Don't think there's currently an straightforward solution for this, so I just comment out the line for renaming images:

// Gruntfile.js
// ...
rev: {
    dist: {
        files: {
            src: [
                '<%= yeoman.dist %>/scripts/{,*/}*.js',
                '<%= yeoman.dist %>/styles/{,*/}*.css',
                // '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}',
                '<%= yeoman.dist %>/styles/fonts/*'
            ]
        }
    }
}

Answer 2

Best explanation I've found is here: https://stackoverflow.com/a/20433339/314631

In short, the grunt rev task works as expected for css background images but not for img src attr.