在Angular中显示运行时用户添加的图像

Question

我正在使用Angular 5，我正在尝试显示用户从他们身边上传的图片。

当用户上传图片时，我将此图片放在assets文件夹中，然后我将图像路径和名称保存在数据库中（ assets / images / userupload / example.jpg ）。

然后我将此路径设置为图像srouce <img src="assets/images/userupload/example.jpg" />

但它显示 404（未找到） 错误。从页面源获取URL并尝试在新选项卡中打开它，我收到此错误 错误错误：未捕获（在承诺中）：错误：无法匹配任何路由。网址细分：'assets / images / userupload / example.jpg'

在角度编译之后，每件事情都完美无缺，并且不再出现上述错误。

有人可能指出，我做错了什么，我应该把它放在资产文件夹中？

编辑： HTML代码

<img *ngIf="carModel.imageUrl && carModel.imageId" [src]="carModel.imageUrl" height=250 width=400 alt="car model">

Answer 1

您是否测试过停止服务并重新启动服务？ 使用firefox你可以在绝对路径上测试你的图片吗？

为例： http://mycomputer/assets/images/userupload/example.jpg

Answer 2

检查两件事：

1. 您正在使用相对路径。它真正指向这种方式是什么，它是你想要它指向的路径吗？

2. 您的错误表示您的服务器无法将路径识别为资产路径。

   • 如果您使用ng serve运行开发人员服务器：
     请检查.angular-cli.json文件中是否有您尝试加载资产的路径from被列为资产路径，即：

     {
       …
       "apps": [
         {
           …
           "assets": [
             "assets",
             …
           ],
           …
         }
       ],
       …
     }
     

   • 如果您正在使用网络服务器，检查资产路径是否配置为从文件系统提供，而不是通过Angular提供。