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...

Answer 2

FWIW, I believe that the author of rev is being opinionated about something here: they're asserting that images should be included as CSS backgrounds, not via img tags. So, if your templates and views get all their images that way, you won't have any trouble.

IMHO, this is a pretty good convention to follow. Do everything with background images, and the problem should be solved across the application.

Answer 3

You can transform the images url in the ember compiled template js... here's an example configuration of usemin that does this:

    usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
            assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/css'],
            // The next pattern renames images within ember templates
            patterns: {
              js: [[/src=['"]([^"']+)["']/gm, 'Update the ember templates JS to reference our revved images']]
            }
        },
        js: ['<%= yeoman.dist %>/scripts/*.templates.js']
    }

Answer 4

Try this:

usemin: {
            html: ['<%= yeoman.dist %>/**/*.html'],
            css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
            js: ['<%= yeoman.dist %>/scripts/**/*.js'],
            options: {
                dirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'],
                assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'],
                patterns: {
                    js: [
                        [/["']([^:"']+\.(?:png|gif|jpe?g))["']/img, 'Image replacement in js files']
                    ]
                }
            }
        }

From here: Grunt plugin for assets versioning

The regex glob validates, as opposed to other solution shown here.

Also rolled back to use-min 2.1.1 npm install [email protected] --save-dev

Although, I think 'assetsDirs' as opposed to just 'dirs' causes the undefined function error?