ember 模板 grunt build 中的图片地址 [英] Image address in ember templates grunt build

问题描述

我使用 Yeoman 在 EmberJS 中创建了一个 Web 应用程序.一切正常，但在使用 grunt build 命令后，如果我在浏览器中查看构建的应用程序(从 dist 目录)，我可以看到一些图像丢失，因为 src 路径错误.

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 正在更改图像"文件夹中所有图像的名称，但不更新我的 HTML 中的路径.它只更新 css 文件中的路径；.hbs 模板文件中的图像仍然具有旧路径(具有旧图像名称)...

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?

推荐答案

最后我摆脱了这个:

所有需要的是编辑项目根目录中的 Gruntfile.js；rev 任务是管理图像重命名的任务；通常是这样的:

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/*'
                ]
            }
        }
    },

就这样完成了；所有图像都将保留其原始名称，因此不会在 css、html 或 hbs 文件中更新任何路径...注意 rev 任务只负责文件重命名，不负责压缩(对于图像它是由 imagemin 任务完成的)，因此图像在任何情况下都会被压缩...

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

这篇关于ember 模板 grunt build 中的图片地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！