javascript - 背景图片不是通过javascript添加的

Question

我正在尝试使用modernizr，以便我的javascript可以检测浏览器是否支持object-fit和object-position。我从 Modernizr 获得的代码工作正常，但如果它检测到类似 no-object-fit 的内容，我想执行这段代码:

if (!Modernizr.objectfit) {
    $('.wrapper__figure').each(function() {
        var $container = $(this),
            imgUrl = $container.find('img').prop('src');
        if (imgUrl) {
            $container
                .css('background-image', 'url(' + imgUrl + ')');
        }
    });
}

我似乎无法正常工作。如果我检查开发人员模式，浏览器内部不会进行任何更改(我只在 IE 中测试这一点。所有其他浏览器都不需要这个)。我认为这与将 .css('background-image', 'url(' + imgUrl + ')'); 添加到 $container 有关，但我不太确定是这种情况还是其他原因

Answer 1

它的 attr 而不是 prop - 因为 src 是一个属性，而不是一个属性。

if (Modernizr.objectfit) {
    $('.wrapper__figure').each(function() {
        var $container = $(this),
            imgUrl = $container.find('img').attr('src');

        if (imgUrl) {
            $container.css('background-image', 'url(' + imgUrl + ')');
        }
    });
}