Aframe在Angular和ARJS中无法加载本地路径的图像。
- 确认路径是否正确
确保所需图像的路径是正确的，并且可以通过相对或绝对路径访问。您可以将路径硬编码到组件模板中，或者将其存储在组件的变量中。例如：
- 使用URL.createObjectURL加载本地文件
另一种方法是使用URL.createObjectURL方法创建URL，然后将其传递给Aframe中的图像组件。这将允许Aframe在Angular和ARJS应用程序中加载本地文件。例如：
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template:
})
export class MyComponent {
public imageSrc: string;
constructor() { const file = new File(['/assets/images/my-image.jpg'], 'my-image.jpg', { type: 'image/jpeg' }); this.imageSrc = URL.createObjectURL(file); } }
请注意，由于URL.createObjectURL返回Blob URL，因此必须在不需要时释放它。此操作可通过调用URL.revokeObjectURL方法进行。例如，您可以在组件销毁时撤销URL：
import { Component, OnDestroy } from '@angular/core';
@Component({
selector: 'my-component',
template:
})
export class MyComponent implements OnDestroy {
public imageSrc: string;
constructor() { const file = new File(['/assets/images/my-image.jpg'], 'my-image.jpg', { type: 'image/jpeg' }); this.imageSrc = URL.createObjectURL(file); }
ngOnDestroy() { URL.revokeObjectURL(this.imageSrc); } }
- 使用baseHref作为图片源
最后一个解决方法是将图像源设置为应用程序的