Angular中A-Frame结合AR.js无法加载本地路径图片问题

问题场景 #

在Angular的app.component.html中使用A-Frame结合AR.js加载本地图片时，出现404错误：

GET http://localhost:4200/mnt/r/flipkart/proj/src/app/abcd.jpg 404 (Not Found)

对应的代码片段：

<a-scene embedded arjs>
    <a-assets>
        <img id="test_img" src="/mnt/r/flipkart/proj/src/app/abcd.jpg">
    </a-assets>
    <a-marker preset="hiro" url="hiro.patt">
        <a-image 
            rotation="90 0 0"
            src="#test_img"></a-image>
    </a-marker>
    <a-entity camera></a-entity>
    <div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
      <button (click)="hideme()">
          HIDE OBJECTS
      </button>
  </div>
</a-scene>

解决方案 #

方法1：使用Angular静态资源目录（推荐） #

Angular对前端可访问的静态资源有明确的目录规范，必须放在src/assets下：

• 步骤1：将abcd.jpg移动到src/assets目录（可创建子目录如src/assets/images分类管理）。
• 步骤2：修改图片路径为相对路径：

<a-assets>
    <!-- 直接引用assets下的图片 -->
    <img id="test_img" src="assets/abcd.jpg">
    <!-- 若放在子目录则写：src="assets/images/abcd.jpg" -->
</a-assets>

• 原理：Angular打包时会将src/assets下的资源映射到项目根路径（http://localhost:4200/assets/），浏览器能正确请求到资源，同时符合浏览器安全策略，不会触发跨域或文件访问限制。

方法2：Base64嵌入图片（仅适合小图片） #

将图片转为Base64编码，直接嵌入HTML中，无需发起GET请求：

<a-assets>
    <img id="test_img" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD...">
</a-assets>

注意：这种方式会增大HTML文件体积，不利于维护，仅适合小图标类资源。

内容的提问来源于stack exchange，提问作者rhino