如果是File或base64，如何在p-gallery中显示图像？

Question

有可能吗？文档仅显示图像路径的情况 html:

<p-galleria [images]="images" panelWidth="500" panelHeight="313" [showCaption]="true"></p-galleria>

ts

images: any[];

    ngOnInit() {
        this.images = [];
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria1.jpg', alt:'Description for Image 1', title:'Title 1'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria2.jpg', alt:'Description for Image 2', title:'Title 2'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria3.jpg', alt:'Description for Image 3', title:'Title 3'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria4.jpg', alt:'Description for Image 4', title:'Title 4'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria5.jpg', alt:'Description for Image 5', title:'Title 5'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria6.jpg', alt:'Description for Image 6', title:'Title 6'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria7.jpg', alt:'Description for Image 7', title:'Title 7'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria8.jpg', alt:'Description for Image 8', title:'Title 8'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria9.jpg', alt:'Description for Image 9', title:'Title 9'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria10.jpg', alt:'Description for Image 10', title:'Title 10'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria11.jpg', alt:'Description for Image 11', title:'Title 11'});
        this.images.push({source:'assets/showcase/images/demo/galleria/galleria12.jpg', alt:'Description for Image 12', title:'Title 12'});
    }

参考：https://www.primefaces.org/primeng/#/galleria

如何显示来自文件类型或base64字符串的图像？有可能吗？

Answer 1

应该直截了当。如果您有 base64 图片代码，您可以使用 base 推送图片。

  ngOnInit() {
        this.images = [];
        this.images.push({
            source:
                'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD, alt: 'Description for Image 2',
        title: 'Title 2', });

注意：图片开头使用base64。这只是一个示例base64编码使用您自己的文件或将您的文件上传到任何云，如Azure或AWS到得到 link.

希望对您有所帮助

如果是File或base64，如何在p-gallery中显示图像？

How to display images in p-gallery in case when are File or base64?

angular

image

primeng

galleria