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不会改变，但图像具有其他名称。获取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,
    });

网址将正确加入。

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

1 个答案: