Image address in ember grunt build templates

Question

I used Yeoman to create a web application in EmberJS. Everything works fine, but after using the grunt build , if I look at the embedded application in the browser (from the dist directory), I see that some images are missing because the src path is incorrect.

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

Does anyone know how to fix this?

Answer 1

I finally got rid of this:

all that is needed is to edit Gruntfile.js at the root of the project; the task of rev is to manage image renaming; this is usually 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 need to delete the line that tells it to process the image folder:

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

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

Answer 2

FWIW, I believe that the author of rev is tired of something here: they argue that images should be included as CSS backgrounds, and not through img tags. So, if your templates and views get all their images in this way, you won't have any problems.

IMHO, this is a pretty good agreement. Do everything with background images, and the problem should be resolved in the application.

Answer 3

You can convert the image url into a template compiled by ember js ... here is an example usemin configuration 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 the following:

 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 Asset Versioning Plugin

The regex slider checks, unlike the other solution shown here.

Also rollback to use-min 2.1.1 npm install grunt-usemin@2.1.1 --save-dev

Although, I think that "assetsDirs", unlike "dirs", causes an undefined function error?