javascript - 使用 grunt build 的 JS 文件上图像的引用名称

Question

我将图像引用到 JavaScript 文件中，当我使用 grunt 进行构建时，该图像的引用不会改变。

这是 Gruntfile 的部分

// Put files not handled in other tasks here
        copy: {
            dist: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '<%= yeoman.app %>',
                    dest: '<%= yeoman.dist %>',
                    src: [
                        '*.{ico,png,txt}',
                        '.htaccess',
                        'images/*.*',
                        'styles/fonts/{,*/}*.*',
                        'bower_components/sass-bootstrap/fonts/*.*',
                        'views/*.*'
                    ]
                }]
            },

这是如何调用图像:

var markerImage = new google.maps.MarkerImage(
            'images/marker.png',
            null,
            new google.maps.Point(0, 0),
            new google.maps.Point(18, 18)
        );
        var marker = new google.maps.Marker({
            position: latLng,
            map: regionMap,
            icon: markerImage, //set the markers icon to the MarkerImage
            draggable: true,
        });

当我进行构建时，JS 上图像的 URL 没有改变，但图像有其他名称。GET 127.0.0.1:3000/images/maker.png 404(未找到)

图像的名称是685952.marker.png

Answer 1

我知道这是一个老问题，但我前段时间也遇到过同样的问题，并提出了一个相当简单的解决方案。

这个想法是在 CSS 中使用以下内容:

.map-marker {
    background: url('images/marker.png');
    display: none;
}

并使用 map-marker 类创建 HTML 元素。然后，在JS中引用它们:

var markerUrl = /url\((.+)\)/g.exec(document.querySelector('.map-marker').style.background)[1];
var markerImage = new google.maps.MarkerImage(
        markerUrl,
        null,
        new google.maps.Point(0, 0),
        new google.maps.Point(18, 18)
    );
    var marker = new google.maps.Marker({
        position: latLng,
        map: regionMap,
        icon: markerImage, //set the markers icon to the MarkerImage
        draggable: true,
    });

URL 将被正确加速。