当图像不存在时，角度通用/ ng-toolkit /通用会引发错误

Question

我在服务器端渲染方法中使用@ ng-toolkit / universal。一切正常，没有我的图像。我正在动态地获取它们。因此，当用户没有头像时，会显示一个占位符图像。因此，我正在使用此功能：

verifyAvatar(imageSrc) {
        let img = new Image;
        img.src = imageSrc;

        if(img.complete){
            this.userAvatar= imageSrc
        } else {
            this.userAvatar= '../../../../assets/images/userGraphics/no_avatar.png';
        }
    }

但是此函数给我的server.ts / logfile->

内部错误

  

错误{错误：未捕获（承诺）：错误：无法匹配任何路由。   网址段：   '资产/图像/ userGraphics / 5c38f71e07b6b83f20b46993_avatar'   错误：无法匹配任何路线。网址段：   'assets / images / userGraphics / 5c38f71e07b6b83f20b46993_avatar'

两个图像的完全错误长度约为300-450行。我希望您能理解，当服务器控制台被此淹没时，您会感到困惑。

那么我该如何处理Angular Universal / Ng-toolkit / universal，从而不会引发任何错误？

仅作通知，我的功能可以正常工作，服务器也不会崩溃，但是如果错误消失了，我会感觉好很多。

编辑： 我刚刚创建了一个仓库来重现此-> https://github.com/Sanafan/angularUniversalTest

定义图像时也会引发错误：

Answer 1

由于角度回复带有md5sum哈希值错误，这意味着将其识别为png文件存在设置问题。

如果替换了组件HTML，会发生什么情况（未定义时将userAvatarSrc设置为false）？

<div  *ngIf="userAvatarSrc">
<img [src]="userAvatarSrc"></img>
</div> 
<div  *ngIf="!userAvatarSrc">
<img src="../../assets/images/userGraphics/noAvatar.png"></img>
</div> 

Answer 2

我还没有使用Angular Universal，但是据我所知/知道，您正在将dist/browser文件夹设置为Express服务器中的静态资源。

现在，在您的verifyAvatar函数中，您将创建一个HTMLImageElement（new Image），并在下一行中分配src。

因此，服务器将尝试使用提供的src值创建Image元素。就您而言，它在给定路径（src）上找不到任何图像，并且会记录错误。

以上之后，它将继续检查角度条件（if (img.complete)），该条件将为false，并且正确的路径将分配给userAvatar变量。并且您将在浏览器中看到正确的图像。

因此，您正在终端窗口（服务器端）看到的错误即将来临，因为您尝试使用路径创建Image元素，而该路径没有任何图像。

为避免这种情况，您必须仅在服务器端检查映像是否存在。