Angular - img 在本地加载正常，但在开发服务器上不加载

Question

我有这个<img>，它从planeringskartaSrc 变量加载图像，当arrayBuffer 图像在我的本地环境中作为函数arrayBufferToBase64 的输入传递时，它工作正常。当我在localhost 上运行应用程序时，当函数的buffer 为空时，加载默认图像planeringskarta_notfound.png 也可以正常工作。当我将应用程序部署到开发服务器时，arrayBuffer 图像作为输入传递给函数加载，它工作得很好，但 /assets/img/planeringskarta_notfound.png 无法加载到应用程序中。对于该项目，我在angular.json 文件中像这样链接了assets 文件夹：

angular.json：

"assets": [
              "projects/up-client/src/assets",
              "projects/up-client/src/assets/icons/favicon.ico"
            ],

HTML：

<img (click)="previewPlaneringskarta()" class="planeringskarta" [src]="planeringskartaSrc"/>

TypeScript：

arrayBufferToBase64( buffer ) {
    let binary = '';
    const bytes = new Uint8Array( buffer );
    const len = bytes.byteLength;

    if (!buffer) {
      return this.planeringskartaSrc = "/assets/img/planeringskarta_notfound.png";
    }

    for (let i = 0; i < len; i++) {
      binary += String.fromCharCode( bytes[ i ] );
    }

    const imageSrc = 'data:image/gif;base64,' + window.btoa( binary );
    this.planeringskartaSrc =  this.sanitization.bypassSecurityTrustUrl(imageSrc);
  }

为什么图片在本地加载而不是在开发服务器上？

Answer 1

尝试删除 src 路径开头的斜杠，例如“assets/img/planeringskarta_notfound.png”