无法将图像从快递服务器投放到Angle 2

时间:2018-08-26 08:14:16

标签: angular express server

我有使用快递生成器配置的快递服务器。

我在快递中写着这行:

app.use(express.static(path.join(__dirname, 'public')));

在角度代码中,我也有这个:

img src="/images/pic.png".

该图像位于express生成器文件夹中的public /图像中,并且不会在浏览器中呈现。

如果我将代码替换为img src="http://localhost:8080/images/pic...",它将呈现。

我尝试了所有技巧。我在做错什么吗?

2 个答案:

答案 0 :(得分:0)

您需要提供Angular应用程序将要命中的基本URL,以获取静态内容或命中API。

因此,您可以在服务中执行以下操作,并在组件的.ts 文件中提供该信息,或者,如果您希望声明 environment.ts 文件中的baseUrl :-

const baseUrl = http://localhost:8080;

,然后在您的组件的HTML 中:-

<img src="{{baseUrl}}/images/pic.png">

您遇到的问题归因于img src="/images/pic.png"。它将从提供角度应用程序的域中命中。因此,如果您正在开发应用程序,则通常会导致img src="http://localhost:4200/images/pic.png"

但是,如果您从托管图片的同一域中提供应用程序,即如果您使用了反向代理,则可以按照尝试的方式获取它。但这需要您配置其他服务器。

答案 1 :(得分:0)

我建议检查baseurl的角度设置,例如,如果您正在运行4+角度项目,则可以在index.html head标签内设置基本url

<base href="./">

然后,您不必为任何资源设置绝对路径。