Image address in ember templates grunt build

Question

I used Yeoman to create a web app in EmberJS. Everything works ok, but after using the grunt build command, if I view the built app in the browser (from dist directory), I can see that some images are missing because the src path is wrong.

Grunt is changing the names of all images in the "image" folder, but not updating the paths in my HTML. It updates the path only in css files; the images in the .hbs template files still have the old path (with the old image name)...

Anyone know how to fix this?

Answer 1

Finally i got rid of this:

all that is needed is to edit the Gruntfile.js in the project's root; the rev task is the one that manage image renaming; usually it is something like this:

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

You just have to delete the row that tell him to process the images folder:

rev: {
        dist: {
            files: {
                src: [
                    '<%= yeoman.dist %>/scripts/{,*/}*.js',
                    '<%= yeoman.dist %>/styles/{,*/}*.css',
                    '<%= yeoman.dist %>/styles/fonts/*'
                ]
            }
        }
    },

And it is done; all the images will keep their original names and so no path will be updated in css, html or hbs files... Note that the rev task is only responsible for file renaming, not for compression (for images it is done by imagemin task) and so the images will be compressed in any case...