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

Question

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

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

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

但它显示404(未找到(错误。从页面源获取 url 并尝试在新选项卡中打开它，我收到此错误错误错误：未捕获(承诺(：错误：无法匹配任何路由。网址细分："资产/图片/用户上传/示例.jpg">

在 Angular 被编译后，一切都可以完美地工作，并且不再出现上述错误。

有人可以指出，我做错了什么，我应该首先将其放在资产文件夹中吗？

编辑： 网页代码

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

Answer 1

您是否测试了停止ng服务并重新启动ng服务？ 使用火狐浏览器，您是否在绝对路径中测试了您的图片？

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

Answer 2

检查两件事：

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

您的

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

   • 如果您正在运行带有ng serve：
     检查您的.angular-cli.json文件，如果您尝试从中加载资产的路径被列为资产路径，即：

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

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