Images not displayed in Angular 8

[trentjones21]

I'm using the example from the demo website

  <mat-carousel
    timings="250ms ease-in"
    [autoplay]="true"
    interval="5000"
    color="accent"
    maxWidth="100%"
    proportion="100"
    slides="5"
    [loop]="true"
    [hideArrows]="false"
    [hideIndicators]="false"
    [useKeyboard]="true"
    [useMouseWheel]="false"
    orientation="ltr"
  >
    <mat-carousel-slide
      #matCarouselSlide
      *ngFor="let slide of slides; let i = index"
      [image]="slide.image"
      overlayColor="#00000040"
      [hideOverlay]="false"
    ></mat-carousel-slide>
  </mat-carousel>

And all I get is a grey background:

Here is my "slides" array:

  slides = [{
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }, {
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }, {
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }, {
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }, {
    image: 'https://arbordayblog.org/wp-content/uploads/2018/06/oak-tree-sunset-iStock-477164218-1080x608.jpg',
  }];

This is my first time trying to use the library, so I'm not sure if it is an Angular 8 problem, or a "me" problem. Feel free to close if it is the latter. Thanks.

[favna]

Using Angular v8.0.1 myself and it works just fine:

Try to remove the let i = index from the *ngFor for starters. For comparison's sake this is my own code:

      <mat-carousel
        [autoplay]="carousel.autoplay"
        [color]="carousel.color"
        [hideArrows]="carousel.hideArrows"
        [hideIndicators]="carousel.hideIndicators"
        [interval]="carousel.interval"
        [loop]="carousel.loop"
        [maxWidth]="carousel.maxWidth"
        [orientation]="carousel.orientation"
        [proportion]="carousel.proportion"
        [slides]="carousel.slides"
        [timings]="carousel.timings"
        [useKeyboard]="carousel.useKeyboard"
        [useMouseWheel]="carousel.useMouseWheel"
      >
        <mat-carousel-slide
          *ngFor="let slide of slides; trackBy: ngForTrackBy"
          [hideOverlay]="carousel.hideOverlay"
          [image]="slide.url"
          [overlayColor]="carousel.overlayColor"></mat-carousel-slide>
      </mat-carousel>

  public slides: { url: string }[] = [
    { url: '/assets/screenshots/seedcheck/base.png' },
    { url: '/assets/screenshots/seedcheck/noseed.png' },
    { url: '/assets/screenshots/seedcheck/seed.png' }
  ];
  public carousel: IMatCarouselOptions = {
    timings: '250ms ease-in',
    autoplay: true,
    interval: 5000,
    loop: true,
    hideArrows: false,
    hideIndicators: false,
    color: 'warn',
    maxWidth: 'auto',
    proportion: 35,
    slides: this.slides.length,
    overlayColor: '#00000040',
    hideOverlay: true,
    useKeyboard: true,
    useMouseWheel: true,
    orientation: 'ltr',
  };

[quedicesebas]

The problem is that is not supporting remote images, with local images (images in the project) works well, but if I use remote images I got this warning an none image displayed:

WARNING: sanitizing unsafe URL value "https://tourbitz-resources.s3.amazonaws.com/undefinedbogota-grafiti-tour.jpg" (see http://g.co/ng/security#xss)
WARNING: sanitizing unsafe style value url("https://tourbitz-resources.s3.amazonaws.com/undefinedbogota-grafiti-tour.jpg") (see http://g.co/ng/security#xss).

[alerubis]

#15

[gbrlsnchs]

I'll check the PR this weekend. Thanks for the help!

[FirePhenix]

The problem is that is not supporting remote images, with local images (images in the project) works well, but if I use remote images I got this warning an none image displayed:

WARNING: sanitizing unsafe URL value "https://tourbitz-resources.s3.amazonaws.com/undefinedbogota-grafiti-tour.jpg" (see http://g.co/ng/security#xss)
WARNING: sanitizing unsafe style value url("https://tourbitz-resources.s3.amazonaws.com/undefinedbogota-grafiti-tour.jpg") (see http://g.co/ng/security#xss).

hi, i got this warning also, did you find a solution to fix it ? thx.

[gbrlsnchs]

I merged #15 and it's in the v0.5.0 release. Could you please try it out? @trentjones21 @sebrojas14 @FirePhenix

[FirePhenix]

ok,I will try it ,thx.

[FirePhenix]

it's work. but how to set the component height ?

[gbrlsnchs]

it's work. but how to set the component height ?

This seems to be a different issue. Would you mind opening a new issue with more in-depth context?