图像未立即以角度显示

Question

这是我的component.html:

<div class="image-container">
    {{cat.picture_path}}
    <img src="assets/{{cat.picture_path}}">
</div>

我放了 {{cat.picture_path}} 只是为了让我知道picture_path 是正确的并且img 标记指向该图像。

现在我通过表单将该图像保存到我的后端并保存到我的assets 文件夹中。

当我点击提交时，图片被保存到正确的位置，但是当我打开一个显示该图片的页面时，我得到：

image39.png:1 GET 
http://localhost:4200/assets/image39.png 404 (Not 
Found)
Image (async)...

图像存在于该文件夹中并且路径正确。

让我感到困惑的是，这个警告会在 10 分钟左右后消失，并且显示图片时没有任何警告。

我尝试在添加照片后重新打开 Angular 项目，但这并没有改变任何东西。图片只会在一段时间后出现。

我是否必须以某种方式重置路径或刷新目录以便 Angular 可以查找图像？

这是怎么回事？

更新 1：

即使我去 If http://localhost:4200/assets/image39.png 我得到：

core.js:5873 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'assets/image39.png'
Error: Cannot match any routes. URL Segment: 'assets/image39.png'

即使图像在文件夹中。如果我尝试使用其他图像，它会按预期工作。

更新 2：

使用ng serve 重新打开 Angular 项目解决了这个问题，但仍然不明白为什么

更新 3：

在我的tsconfig.json 文件中更改"outDir": "./dist", 并将我的img 标记更改为img src="/assets/images/{{cat.picture_path}}" 后，它现在在我使用启用--liveReload=true 的IDE 重新加载应用程序后不久显示图像。从浏览器刷新页面没有任何作用。有没有办法在上传图片时立即重新加载这个组件？

Answer 1

问题是我将图像保存在assets 文件夹中，该文件夹用于存储基本上是软件一部分的静态内容。这就是为什么每次添加图像时我都必须重建应用程序。不要将assets 用于动态内容。

为此，我使用了我的后端并设置了一个 REST 点，我通过请求在其中提供图像。现在每次加载该页面时，我都请求后端提供该图像，我获取 url 并将其放入我的 img 标记中。

Answer 2

我认为这里的问题与您上传图片的路径有关。默认情况下，您的项目根目录中有一个 assets 文件夹和一个 dist 文件夹。当您构建项目时，Angular 会将 assets 文件夹复制到 dist 文件夹中，服务器将内容从 dist 文件夹提供给浏览器。因此，当您在浏览器中输入http://localhost:4200/assets/image39.png 时，您引用的是dist/assets/image39.png。所以我认为这里发生的事情是您正在将图像上传到根资产文件夹，但服务器正在查看没有图像的dist/assets。当您使用--liveReload=true 运行ng serve 时，Angular 会在每次文件更改时自动将assets 复制到dist/assets，这就是它起作用的原因，但在生产中您没有。确保您的后端将图像放入 dist/assets 中，它应该可以正常工作。

Answer 3

试试

<img src="assets/images/image39.png">

我认为这个https://github.com/angular/angular-cli/issues/9852 问题也与您的问题有关。如果您想要任何其他方式，您可以在那里尝试解决方案。

除此之外，请检查您的 tsconfig.json 文件。如果它有改变这个： "outDir": "./dist/out-tsc", 应该改成

"outDir": "./dist", 

这个也是。