IE 11渲染白色X而不是图像

时间:2017-01-27 15:30:41

标签: javascript html angularjs cross-browser

我正在Anugular 1.5上开发SPA。我在IE11上遇到了非常糟糕的错误。它不会渲染我的照片,而是在黑盒子里得到白色X.什么是最有趣的,浏览器根据要求获得200代码响应img。 附上带有问题的HTML代码和屏幕

function NewsController($rootScope, $scope, $rest, $translate, $sideFilterMenuItems, $languages, $utils) {
    var $ctrl = this;
    $ctrl.sideFilterMenuItems = $sideFilterMenuItems;
    $ctrl.languages = $languages;
    $ctrl.news = [];
    $ctrl.tags = [];
    $ctrl.tagsSearchString = undefined;
    $ctrl.validDatePicker = true;
    $ctrl.readNews = false;
    $ctrl.unreadNews = false;
    $ctrl.newsLoading = false;
    $ctrl.noResults = false;
    $ctrl.error = undefined;
    $ctrl.filters = {
      pageNumber: 1,
      searchStrings: undefined,
      filterType: undefined,
      language: undefined,
      dateFrom: undefined,
      dateTo: undefined,
      read: undefined
    };

    getNews();

    $ctrl.getNews = getNews;

    $scope.$on('event.common.bottomReached', function () {
      getNews();
    });

    $ctrl.getNewsTags = function (searchString) {
      if (searchString.length >= 3) {
        $rootScope.silent = true;
        return $rest.getNewsTags({
          searchString: searchString
        }).$promise.then(function (response) {
          if (!_.isEmpty(response.tags)) {
            _.each(response.tags, function (tag) {
              tag.translation = $translate;
              $translate('news.' + tag.text).then(function (translation) {
                tag.translation = translation;
              });
            });
            return response.tags;
          }
          return [];
        }, angular.noop);
      }
    };

    $ctrl.fillInTags = function (tag) {
      if (!_.includes(_.map($ctrl.tags, 'code'), tag.code)) {
        $ctrl.tags.push(tag);
      }
      $ctrl.tagsSearchString = undefined;
      $scope.$digest();
    };

    $ctrl.resetFilters = function () {
      $ctrl.tags = [];
      $ctrl.tagsSearchString = undefined;
      _.each($ctrl.filters, function (fval, fkey) {
        switch (fkey) {
          case 'filterType':
            break;
          case 'pageNumber':
            $ctrl.filters.pageNumber = 1;
            break;
          default:
            $ctrl.filters[fkey] = undefined;
            break;
        }
      });
      _.each($languages, function (language) {
        language.active = false;
      });
      $languages[0].active = true;
      $ctrl.news = [];
      $ctrl.readNews = false;
      $ctrl.unreadNews = false;
      getNews();
    };

    $ctrl.getLongDescription = function (item) {
      var longDescriptionContainer = $('#' + item.newsId + '_LongDescription');
      longDescriptionContainer.html($ctrl.getPartContent(item.content));
    };

    $ctrl.getPartContent = function (part) {
      var currentLang = $translate.use();
      if (_.isEmpty(part[currentLang])) {
        switch (currentLang) {
          case 'en':
            return part.ru;
          case 'ru':
            return part.en;
          default:
            return '';
        }
      } else {
        return part[currentLang];
      }
    };

    function getNews(force) {
      $ctrl.newsLoading = true;
      $ctrl.noResults = false;
      $ctrl.error = undefined;
      $ctrl.filters.dateFrom = $utils.isValidDate($ctrl.filters.dateFrom) ? moment($ctrl.filters.dateFrom).format('YYYY-MM-DD') : undefined;
      $ctrl.filters.dateTo = $utils.isValidDate($ctrl.filters.dateTo) ? moment($ctrl.filters.dateTo).format('YYYY-MM-DD') : undefined;
      $ctrl.filters.read = (($ctrl.readNews && $ctrl.unreadNews) || (!$ctrl.readNews && !$ctrl.unreadNews)) ? undefined : $ctrl.readNews;

      var searchStrings = _.map($ctrl.tags, 'synonymString');
      if (!_.isEmpty($ctrl.tagsSearchString)) searchStrings.push($ctrl.tagsSearchString);
      $ctrl.filters.searchStrings = _.join(searchStrings, ',') || undefined;

      if (force) {
        $ctrl.news = [];
        $ctrl.filters.pageNumber = 1;
      }

      $rest.getNews($ctrl.filters).$promise.then(
        function (data) {
          if (!_.isEmpty(data.items)) {
            $ctrl.news = _.concat($ctrl.news, data.items);
            $ctrl.filters.pageNumber++;
          }
          $ctrl.noResults = _.isEmpty($ctrl.news);
          $ctrl.newsLoading = false;
        },
        function (response) {
          $ctrl.error = response.data.code || 'error.unknownError';
        }
      );
    }
  }
<div class="item" ng-class="{read: item.read}" ng-repeat="item in $ctrl.news">
        <div class="header-row unselectable">
          <div class="date">{{ item.publicationDate | date: 'shortDate' }}</div>
          <div class="type">{{ 'news.' + item.group.text | translate }}</div>
          <div class="favorite" ng-click="$ctrl.markNewsAsFavorite(item)">
            <i ng-if="item.favorite" class="fa fa-star selected"></i>
            <i ng-if="!item.favorite" class="fa fa-star-o"></i>
          </div>
        </div>
        <div class="topic-row">{{ $ctrl.getPartContent(item.topic) }}</div>
        <div class="tags-row unselectable" ng-if="item.tags.length > 0">
          <div class="newstag" ng-repeat="tag in item.tags">{{ 'news.' + tag.text | translate }}</div>
        </div>
        <div class="content-row row">
          <div class="col-xs-3 col-md-3 image unselectable" ng-if="item.imageId">
            <img ng-src="/portal/api/private/image?imageId={{ item.imageId }}">
          </div>
          <div id="{{ item.newsId }}_ShortDescription" ng-if="!item.expanded" class="description">
            {{ $ctrl.getPartContent(item.description) }}
          </div>
          <div id="{{ item.newsId }}_LongDescription" ng-if="item.expanded" class="description">
            {{ $ctrl.getLongDescription(item) }}
          </div>
          <div class="read-more link unselectable">
        <span ng-click="$ctrl.markNewsAsRead(item)">
          {{ item.expanded ? 'news.read_less' : 'news.read_more' | translate }}
        </span>
          </div>
        </div>
      </div>

red squares are the places where img should be

1 个答案:

答案 0 :(得分:0)

你试过

吗?
<img src="/portal/api/private/image?imageId={{ item.imageId }}">