在AngularJS

时间:2016-11-21 15:03:43

标签: html css angularjs image

问题在于有时它不会显示图片。 HTTP响应包含代码304,它表示图片已加载,但事实并非如此。 有时它完美无缺。但我不明白如何解决它。请帮我。感谢。

HTML: -

<div class="mycontainer">
    <div class="clickable">
        <div class="imagecontainer">
            <img ng-src="{{ $ctrl.url }}"/>
        </div>
        <div class="details">
        </div>
    </div>
</div>

SCSS / CSS: -

.mycontainer {
  display: inline-block;
  width: 475px;
  height: 132px;
  margin-bottom: 17px;
  float: left;
  overflow: hidden;

  .clickable {
    display: inline-block;
    float: left;
    cursor: pointer;

    .imagecontainer {
       display: inline-block;
       float: left;
       width: 150px;
       margin-right: 17px;

        img {
            width: 150px;
        }
      }

    .details {

      display: inline-block;
      float: left;
      width: 245px;

    }
   }

}

pictureComponent: -

import './picture.scss';

/*@ngInject*/
class PictureComponentController {

  constructor() {
    'ngInject';

      if (this.image) {
        this.url = 'pic1.png';
      } else {
        this.url = 'pic2.png';
      }
    }

  }

}

export default class PictureComponent {

  constructor() {
    this.template = require('./picture.html');
    this.bindings = {
      image: "<image"
      alt: '@oAlt'
    };

    this.controller = PictureComponentController;
  }

}

0 个答案:

没有答案