zoukankan      html  css  js  c++  java
  • AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用加ng-src标签,例如:

    <img ng-src="{{currentUrl}}"/>

    其中currentUrl为图片地址,如果图片正常能显示,那这么使用一点问题没有,但是,如果图片加载失败了(例如该图片已经不存在,从而出现404错误),在该放图片的地方就会出现一个难看的图片加载失败图标,如果想把这个图标换成你自定义的图片,可以如下这么做: 
    HTML:

    <img ng-src="{{currentUrl}}" err-src="img/404.jpg"/>

    Javascript:

    var app = angular.module("MyApp", []);
    
    app.directive('errSrc', function() {
      return {
        link: function(scope, element, attrs) {
          element.bind('error', function() {
            if (attrs.src != attrs.errSrc) {
              attrs.$set('src', attrs.errSrc);
            }
          });
        }
      }
    });

    这样一来,就把错误图标换成了你自己指定的”img/404.jpg

  • 相关阅读:
    seajs快速了解
    lazyload.js详解
    iScroll-js—“smooth scrolling for the web”
    Backbone学习笔记一Backbone中的MVC
    JMH基准测试框架
    idea 下运行安卓项目
    安卓
    C++
    看完
    四叉树的js实现
  • 原文地址:https://www.cnblogs.com/GoodPingGe/p/4529265.html
Copyright © 2011-2022 走看看