图像无法在Angular 2中使用的路径 [英] Path to Images not Working in Angular 2

问题描述

我放置在网站上的所有内容都可以正常运行，但是我尝试放入站点中的每个图像(背景除外)都返回404 Not Found Error.

Everything I have put on my site functions correctly, but every image that I try to put into the site (with the exception of the background) gives back a 404 Not Found Error.

我所有的图像都位于"Project/src/assets/images"，并且我已经尝试了html文档中的以下img标签.这些文档位于"Project/src/app/tabs"中.

All of my images are located at "Project/src/assets/images" and I have tried the following img tags in my html documents. The documents are located in "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设置页面的背景图像，并且可以正常工作.这是我已应用的选择器和属性:

I set the background image for my page using css and it works. This is the selector and the attribute I have applied:

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

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

How can I add images to my HTML documents without getting the 404 error?

推荐答案

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

Your html files are in "Project/src/app/tabs" and you are trying to access from that folder thats why images are not loading. So you need to come back from tabs folder and app folder to reach the base directory for both your code and images. Use ../ to come back from a folder. So after reaching base directory just use normal directory listings.

所以答案是

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

这篇关于图像无法在Angular 2中使用的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！