фоновое изображение по умолчанию, если загруженное изображение в стиле ng неверно

Я добавляю фоновые изображения в мой div вот так

ng-style="{'background-image' : 'url('+ myvariable.for.image +')'}">

где myvariable.for.image - это URL-адрес, подобный /examplesite /image /id

Это прекрасно работает за одним исключением, если изображение отсутствует, оно просто ничего не делает, и мой фон выглядит слишком бла… Если изображение не существует, я хочу заменить его изображением по умолчанию. р>

Но я не могу понять, как

5 голосов | спросил Autolycus 11 Jam1000000amSat, 11 Jan 2014 04:00:57 +040014 2014, 04:00:57

2 ответа


0

Вместо ngStyle я бы использовал для этого специальную директиву. Таких как следующее. Он проверяет, предоставлен ли атрибут, и пытается ли он загрузить это изображение. Если он загружает изображение, то мы устанавливаем для него фоновое изображение, в противном случае мы используем изображение по умолчанию.

myApp.directive('bgImage', function () {
    return {
        link: function(scope, element, attr) {

            attr.$observe('bgImage', function() {           
              if (!attr.bgImage) {
                 // No attribute specified, so use default
                 element.css("background-image","url("+scope.defaultImage+")");
              } else {
                 var image = new Image();  
                 image.src = attr.bgImage;
                 image.onload = function() { 
                    //Image loaded- set the background image to it
                    element.css("background-image","url("+attr.bgImage+")");
                 };
                 image.onerror = function() {
                    //Image failed to load- use default
                    element.css("background-image","url("+scope.defaultImage+")");
                 };
             }
         });
      }
    };
});

Используется так:

 <div bg-image="{{person.src}}">

демонстрационная скрипка

ответил KayakDave 11 Jam1000000amSat, 11 Jan 2014 04:25:54 +040014 2014, 04:25:54
0
<div err-bg-src='{{default_business_logo_wd}}' ng-style="{'background-image' : 'url('+ifNull(place.logo_wd,default_business_logo_wd)+')'}" id="perfilEstablecimiento-container10" class="place-header">
    <div id="perfilEstablecimiento-container13" class="place-title-container">
        <h4 id="perfilEstablecimiento-heading1" class="place-title">{{place.name}}</h4>
    </div>
</div>

Использование $ timeout внутри этой пользовательской директивы мне помогло.

.directive
(
    'errBgSrc',
    function($timeout)
    {
        return {
            link: function(scope, element, attrs) 
            {
                $timeout
                (
                    function()
                    {
                        if(window.getComputedStyle(document.getElementById(attrs.id)).backgroundImage=='none'||window.getComputedStyle(document.getElementById(attrs.id)).backgroundImage==null)
                        {
                            document.getElementById(attrs.id).style.backgroundImage='url('+attrs.errBgSrc+')';
                        }
                        else
                        {
                            var image = new Image();
                            var style=window.getComputedStyle(document.getElementById(attrs.id)).backgroundImage;
                            var url=style.slice(5,style.length-2);
                            image.src = url;

                            image.onerror = function()
                            {
                                document.getElementById(attrs.id).style.backgroundImage='url('+attrs.errBgSrc+')';
                            };
                        }
                    },
                    500
                );

            }
        }
    }
)
ответил Christian Læirbag 7 +03002017-10-07T01:11:28+03:00312017bEurope/MoscowSat, 07 Oct 2017 01:11:28 +0300 2017, 01:11:28

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132