开发者问题收集

显示从设备存储加载的图像时出现错误

2019-09-27
88

不久前,我编写了一个函数,该函数使用照相手机拍照,将其保存到设备的存储中,并在页面上显示已拍摄的照片。该函数几乎完全基于 这个 很棒的示例,并且运行完美。

为了在页面上显示图像,我在 ng-container 内使用此函数: <ng-container *ngFor = "let img of images; index as pos" text-wrap>

现在,我正在编写应用程序的新版本,其某些功能与旧版本相同,包括我提到的功能。但是现在,当触发此在页面上显示图像的功能时,我收到以下错误:

TypeError: Cannot convert undefined or null to object

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

我的代码:

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);
            }
        });
    }
}
2个回答

在 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 的情况下使这项工作并且使用设备文件路径似乎不起作用时...

Layer
2019-09-27

本例中的问题在于 <ng-container> 元素中的“text-wrap”属性。 正如 @rapropos 在 帖子中提到的那样:

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.

leonardofmed
2019-09-30