显示从设备存储加载的图像时收到错误

Question

前段时间我写了一个功能，用相机拍照phone，将它保存到设备的存储器中，并在页面上显示已经拍摄的照片。该功能几乎完全基于 this 很好的示例并且运行完美。

为了在页面上显示图像，我在 ng-container 中使用了这个函数： <ng-container *ngFor = "let img of images; index as pos" text-wrap>

现在我正在编写一个新版本的应用程序，其某些功能与旧版本相同，包括我提到的那个。但是现在当这个在页面上显示图像的功能被触发时，我得到以下错误：

TypeError: Cannot convert undefined or null to object

令人抓狂的是，涉及此功能的代码与之前的代码 100% 相同，运行完美。另一件事，在控制台中我可以看到在触发错误之前图像已经加载，这使得错误更加奇怪，因为 images 数组在错误生成时既不是未定义也不是 null。

我的代码：


const STORAGE_KEY = 'my_images';

export class MyPage implements OnInit {
    images = [];

    constructor(
        private file: File,
        private storage: Storage,
        private platform: Platform,
    )

    ngOnInit() {
        // When platform is ready, load stored images
        this.platform.ready().then(() => {
            this.loadStoredImages();
        });
    }

    loadStoredImages() {
        this.storage.get(STORAGE_KEY).then(images => {
            if (images) {
                let arr = JSON.parse(images);
                this.images = [];
                console.log(arr);

                // Populate local 'images' array with stored data
                for (let img of arr) {
                    let filePath = this.file.dataDirectory + img.name;
                    this.images.push({ name: img.name, filePath: filePath});
                }
                console.log(this.images);
            }
        });
    }
}

Answer 1

当在 then() 中获取图像时，您可以添加如下内容：

this.imagePicker.getPictures(options).then((results) => {

  for(let i = 0; i < results.length; i++){

    let filename = results[i].substring(results[i].lastIndexOf('/') + 1);
    let path = results[i].substring(0, results[i].lastIndexOf('/') + 1);
    this.file.readAsDataURL(path, filename).then((base64string)=>{

      this.image_data[i] = base64string;

    });

  }

});

我不知道你是否得到了图库中的图像，但这对我有用，当我试图在不使用 resolveLocalFileSystemUrl 的情况下完成这项工作并且使用设备文件路径似乎不起作用时...

Answer 2

本例中的问题是 <ng-container> 元素中的 "text-wrap" 属性。正如@rapropos 在 this post:

中提到的

ng-container doesn’t actually turn into a DOM element, so only structural directives can be applied to it. The presence of text-wrap is pulling in the CssUtilsDeprecations directive, which is not structural and therefore assumes that it is sitting atop a DOM element. It isn’t, so blammo.

显示从设备存储加载的图像时收到错误

Receiving error while displaying images loaded from device storage

typescript

ionic-framework

angular

ionic4