显示从设备存储加载的图像时出现错误
不久前,我编写了一个函数,该函数使用照相手机拍照,将其保存到设备的存储中,并在页面上显示已拍摄的照片。该函数几乎完全基于 这个 很棒的示例,并且运行完美。
为了在页面上显示图像,我在 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);
}
});
}
}
在 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 的情况下使这项工作并且使用设备文件路径似乎不起作用时...
本例中的问题在于
<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.