Фоновое изображение не добавляется через JavaScript

Question

Я пытаюсь использовать modernizr, чтобы я мог определить, поддерживает ли браузер 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 + ')');
        }
    });
}