angular - 实现 ngx-gallery 时无法读取未定义的属性 'replace'

Question

我只是在我的项目中尝试 ngx-gallery 使用来自谷歌图像的一些 url，但每次我在控制台中收到以下错误:

错误类型错误:无法读取未定义的属性“替换”
在 NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.validateUrl (ngx-gallery.umd.js:121)
在 NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.getBackgroundUrl (ngx-gallery.umd.js:133)
在 NgxGalleryImageComponent.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryImageComponent.getSafeUrl (ngx-gallery.umd.js:367)
在 Object.eval [as updateRenderer] (NgxGalleryImageComponent.html:3)
在 Object.debugUpdateRenderer [as updateRenderer] (core.js:10872)
在 checkAndUpdateView (core.js:10248)
在 callViewAction (core.js:10484)
在 execEmbeddedViewsAction (core.js:10447)
在 checkAndUpdateView (core.js:10244)
在 callViewAction (core.js:10484)

这是我的 component.ts

export class FefileComponent implements OnInit {
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  ngOnInit(): void {
  this.galleryOptions = [
    {
      'imageArrows': true,
      'imageSwipe': false,
      'thumbnailsArrows': true,
      'thumbnailsSwipe': false,
      'previewSwipe': true,
      'thumbnailsMargin': 0,
      'thumbnailMargin': 0,
      'thumbnailsColumns': 6,
      'width': '100%',
      'height': '450px',
    },
    {
      'imageArrows': true,
      'imageSwipe': false,
      'thumbnailsArrows': true,
      'thumbnailsSwipe': false,
      'previewSwipe': true,
      'thumbnailsMargin': 0,
      'thumbnailMargin': 0,
      'thumbnailsColumns': 6,
      'width': '100%',
      'height': '450px',
    },
  ];

  this.galleryImages = [
      {
          small: 'https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350',
          big: 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg'
      },
      {
          small: 'https://images.hindi.news18.com/ibnkhabar/uploads/459x306/jpg/2018/02/p5-1.jpg',
          big: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNWkbzIr0rgBhjLJ1OqE7gmDEU5RqOunqwW-na5kcqKfr4tZx5eg'
      }
  ];
  }
}

我已将模块正确导入到我的 module.ts 中。我的 html 是:

<div class="container">

    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href>Angular2 File Upload</a>
        </div>
    </div>

    <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

</div>

到目前为止，我大部分时间都在使用 Node，所以对 Angular 不是很熟悉，所以如果你能在这里告诉我方法，我将不胜感激。提前致谢。

Answer 1

ngx-Gallery 使用所有尺寸(小、中、大)的 URL。但在这里您只传递了小型和大型的 URL，而替换功能正在读取所有尺寸的 URL 并为中型 URL 获取 undefined 这就是您收到此错误的原因。也尝试放置媒体 URL，看看它是否有效。