时间戳

首页 > 解决方案 > Angular - img 在本地加载正常，但在开发服务器上加载不正常

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

问题描述

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

角.json：

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

HTML：

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

打字稿：

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);
  }

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

标签： javascripthtmlangulartypescript

解决方案

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

推荐阅读