在 Angular 2 中无法使用的图像路径答案

【问题标题】：Path to Images not Working in Angular 2在 Angular 2 中无法使用的图像路径
【发布时间】：2017-02-20 05:18:55
【问题描述】：

我在网站上放置的所有内容都正常运行，但我尝试放入网站的每张图片（背景除外）都会返回404 Not Found Error。

我所有的图像都位于“Project/src/assets/images”，我在我的 html 文档中尝试了以下 img 标签。文档位于“Project/src/app/tabs”中。

<img src="src/assets/images/image_name.jpg"> 
<img src="/src/assets/images/image_name.jpg">
<img src="./src/assets/images/image_name.jpg">

我使用 css 为我的页面设置了背景图像，它可以工作。这是我应用的选择器和属性：

background: url('assets/images/greybackground.jpg') no-repeat center center fixed;

如何在不出现 404 错误的情况下将图像添加到我的 HTML 文档？

【问题讨论】：

标签： html css image angular

【解决方案1】：

您的 html 文件位于 "Project/src/app/tabs" 中，而您正尝试从该文件夹访问，这就是图像无法加载的原因。因此，您需要从 tabs 文件夹和 app 文件夹返回到您的代码和图像的基本目录。使用../ 从文件夹返回。因此，到达基本目录后，只需使用普通目录列表即可。

所以答案是

<img src="../../assets/images/image_name.jpg">
<img src="../../assets/images/image_name.jpg">
<img src="../../assets/images/image_name.jpg">

【讨论】：