时间戳

首页 > 解决方案 > 角码新编译或服务器重启前无法显示上传的图片

angular - 角码新编译或服务器重启前无法显示上传的图片

问题描述

我一点头绪都没有……

语境

一个 2 页的 Angular 应用程序：

问题

上传的图片无法显示1使用 src="assets/image/fileName.jpg" （得到一个 404）在 Angular 代码新编译或服务器重启之前 1

注意：我可以使用 src="data:image/jpeg;base64..." 方法2在上传页面中显示图片预览

直觉：恐怕我不应该在 Angular 资产文件夹中上传文件，但其他地方可能位于节点服务器的根目录。这是我当前的文件组织：3

代码

节点服务器

在角度“资产/图像”文件夹中移动图片 pictureFile.mv('src/assets/picture/'+ fileName);

角

<img class="picture" src="'src/assets/picture/'{{fileName}}">

问候， 瓦林克

标签： angularcachingcompilationimage-uploadingfile-access

解决方案

您的 FE 应用程序的来源位于 /src 文件夹下。它也是您尝试保存图片的地方。但是“运行时”应用程序位于 /dist 文件夹下。您可以将图片保存到运行时文件夹，只要您不重建 FE 应用程序，它就会按照您的意愿工作

pictureFile.mv('dist/assets/picture/'+ fileName);

当您使用此代码重建应用程序时，它只会重写资产文件夹。您还可以制作一个技巧并将一个文件保存到/dist一个副本并保存到其中/src，它适用于所有本地开发情况。但是，如果您尝试将其部署在某个地方，则不会这样做（因为您的本地 /src 将不再从远程服务器更新）。正确的方法是使用一些持久性，如gridFS

推荐阅读