实现ngx-gallery时无法读取未定义的属性“替换”

Question

我只是ngx-gallery在尝试使用Google图片中的一些网址进行项目，但是每次在控制台中遇到以下错误时：

ERROR TypeError: Cannot read property 'replace' of undefined at NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.validateUrl (ngx-gallery.umd.js:121) at NgxGalleryHelperService.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryHelperService.getBackgroundUrl (ngx-gallery.umd.js:133) at NgxGalleryImageComponent.push../node_modules/ngx-gallery/bundles/ngx-gallery.umd.js.NgxGalleryImageComponent.getSafeUrl (ngx-gallery.umd.js:367) at Object.eval [as updateRenderer] (NgxGalleryImageComponent.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.js:10872) at checkAndUpdateView (core.js:10248) at callViewAction (core.js:10484) at execEmbeddedViewsAction (core.js:10447) at checkAndUpdateView (core.js:10244) at 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上工作，所以对Angle的了解并不多，如果您能向我展示一下方法，我将不胜感激。提前致谢。

Answer 1

ngx-Gallery使用所有大小（小，中，大）的URL。但是在这里，您仅传递大小的URL，而replace函数将读取所有大小的URL，而对于中等URL则未定义，这就是为什么会出现此错误。尝试也放置中等URL，看看是否可行。