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

【问题标题】：How to display images in p-gallery in case when are File or base64?如果是 File 或 base64，如何在 p-gallery 中显示图像？
【发布时间】：2019-09-19 18:56:41
【问题描述】：

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

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

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 字符串的图像？有可能吗？

【问题讨论】：

标签： angular image primeng galleria

【解决方案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 等任何云以获取链接。

希望对你有帮助

【讨论】：