img - Comprender AngularJS ng-src

ng src image angular 4

Question

Como se explica here , la directiva angularjs ng-src se usa para evitar que el navegador cargue el recurso (por ejemplo, la imagen) antes de que se analicen los manillares. Actualmente estoy usando el siguiente código:

<div ng-controller="MyCtrl">
  <img ng-src="http://localhost:8081/media/{{ path }}" />
</div>

Con los siguientes JS:

function MyCtrl($scope, $timeout) {
    $timeout(function () {
        $scope.path = ''images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png'';
    }, 1000);
};

La ruta se está recuperando de un servicio web. Debido a este retraso, el navegador intenta cargar http://localhost:8081/media/ , lo que provoca un error 404. Una vez que se recupera la ruta, el navegador emite la solicitud correcta y carga la imagen.

¿Cuál es el método preferido para evitar cargar cualquier recurso hasta que todos los datos estén listos?

Por favor, vea jsfiddle para un ejemplo que ilustra mi situación.

Gracias,

Martijn

Answer 1

Información por ejemplo

Tomemos esta blogitem directive . Los ejemplos anteriores ya le muestran cómo establecer un valor predeterminado.

HTML:

<blogitem ng-repeat="item in items" 
          bg-src="{{ item.image }}" 
          caption="{{ item.title }}"/>

JS:

.directive( ''blogitem'', function()
{
    return {
        restrict    : ''E'',
        templateUrl : ''js/app/directives/blogitem.html'',
        replace     : true,
        // pass these two names from attrs into the template scope
        scope       : {
            intro : ''@'',
            bgSrc : ''@''
        }
    }
} )

Plantilla HTML:

<article>
    <img ng-src="{{ bgSrc }}"/>
    <p>{{ intro }}</p>
</article>

Espero que te ayude por tu comprensión del ng-src .

Answer 2

En la última, puedes evaluarlo así:

ng-src="{{ methodThatReturnsString() }}"

Answer 3

Estoy seguro de trabajar al 100%.

Primero tienes que hacer tu consulta como esta.

select (select ''../Images/''|| T_LANG2_NAME ||''.png'' T_LANG2_NAME from T04222_T where T_LOG_ID = T04220.T_C_STATUS) TIMER from T04220 
where T_PAT_NO = ''89004331'' group by T_C_STATUS 
having max(T_ARRIVAL_DATE) = (select max(T_ARRIVAL_DATE) from T04220 where T_PAT_NO = ''89004331'');) then you write Code for Controller like this ( if (scope.T_PAT_NO) {
                debugger;
                $http({
                        method: ''POST'',
                        url: ''/T04205/GetTimerImage'',
                        data: JSON.stringify({ PatientCode: scope.T_PAT_NO })
                    }).
                    success(function (data) {
                        debugger;
                        var newDataJSON = JSON.parse(data);

                        scope.TIMER = newDataJSON[0].TIMER;

                    });

entonces el código html como este

<input id="imTimer" type="image" src="{{TIMER}}" style="width: 80px;height: 80px" />

Answer 4

Golpeé el mismo problema también Una cosa que noté es que si el valor de ng-src no está definido, entonces no se obtiene img. Por lo tanto, creé un método de utilidad para calcular dos argumentos y devolver un valor si y solo si ambos argumentos están definidos. Vea abajo.

<div ng-controller="MyCtrl">
  <img ng-src="{{MyUtil.strConcat(''http://localhost:8081/media/'', path)}}" />
</div>

myApp.factory(''MyUtil'', function() {
    return {
        strConcat: function(str1, str2) {
            return (angular.isDefined(str1) && angular.isDefined(str2)) ? 
                (str1 + str2) : undefined;
        }
    }
});

function MyCtrl($scope, $timeout, MyUtil) {
    $scope.MyUtil = MyUtil;
...
}

FIDDLE

Answer 5

Ponga la ruta completa dentro de la variable $ scope. De esta forma, ng-src esperará hasta que proporciones la ruta de acceso a la imagen completamente resuelta:

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

function MyCtrl($scope, $timeout) {
    var path = ''https://si0.twimg.com/profile_images/'';
    $timeout(function () {
        $scope.path = path + ''2149314222/square.png'';
    }, 1000);
};

FIDDLE

Answer 6

Puede establecer ng-src en una cadena vacía si aún no se han llenado los datos:

<div ng-controller="MyCtrl">
  <img data-ng-src="{{ path && ''http://localhost:8081/media/''+path || '''' }}" />
</div>

cuando la path está capitalizada, la condición provocaría un cortocircuito, ir a la or parte y establecer el data-ng-src en '''' (cadena vacía), por lo que no llegará al servidor.