如何在angular 10上使用ng-gallery for angular从get请求中获取图片？
如何在angular 10上使用ng-gallery for angular从get请求中获取图片？
提问于 2020-11-04 20:12:47
我被一些硬编码方法困住了，无法将图像从api直接带到图库或lightbox中……我找不到任何教程，所以我找到了这个例子：
https://stackblitz.com/edit/ngx-gallery-imageviewer
我试着为我的代码更改它，我设法获得了数组中的图像，但我不知道如何像这个家伙那样将它们传递到属性或类似的东西中。
我被困在这一点上，我必须将我的图像传递给具有一些属性的变量：
我的代码：
allImages: PostG[] = [];
fetch(this.apiKey)
.then(response => {
if (response.ok) {
return response.json();
};
})
.then((j: any) => {
const image = [...j.data.post.map(item => item.images)];
image.forEach((image: PostG[]) => {
var obj = {
image:image,
}
this.allImages = [...image];
return{
type: "imageViewer",
imagesGallery: {
srcUrl: console.log(this.allImages),
previewUrl: console.log(this.allImages)
}
}
});
});这段代码给出了下面的结果。
如果你可以检查stackblitz，你可以在这个例子中看到他使用本地图像，在我的情况下，我应该如何设法获得我的照片？我想为我得到的每个帖子图片的每个图库* to。
这是我尝试做的HTML：
<ion-col class="ion-no-padding" size-md="12" size-lg="12" size-sm="12" size-xs="12" *ngFor="let post of allPosts | sortPipe">
//then the gallery inside:
<div class="basic-container">
<h2>Basic Example</h2>
<gallery id="basic-test" fluid [items]="items" [itemTemplate]="itemTemplate" [gestures]="false"></gallery>
</div>
<!-- create a template to use the imageviewer -->
<ng-template #itemTemplate let-index="index" let-type="type" let-data="{{this.allImages}}" let-currIndex="currIndex">
<ng-container *ngIf="type === 'imageViewer' && index === currIndex" >
<ngx-imageviewer [src]="this.allImages"></ngx-imageviewer>
</ng-container>
</ng-template>如果我的问题太长，我很抱歉，我只是想给你所有的信息，以帮助我。我需要这个做一个大项目。谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-04 21:11:23
您需要根据ngx-gallery根据您的响应创建JSON。
有关更多解释，请查看此example。
我尝试创建与您当前所面临的相同的场景
试试这样的东西。
this.response.data.post.forEach(post => {
post.galleryImages = post.images.map(image => {
return new ImageItem({ src: image, thumb: image });
});
});在HTML文件中创建JSON之后
<div class="basic-container" *ngFor="let post of response.data.post; let i=index">
<h2>{{post.title}}</h2>
<p>{{post.description}}</p>
<gallery id="basic-test_{{i}}" fluid [items]="post.galleryImages" [gestures]="false">
</gallery>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64679845
复制相关文章
相似问题
腾讯云开发者
