我的 <img src=""> 使用的正确文件路径是什么

Question

我正在学习 angular，在这个关于 pluralsight 的教程中，有一个 logo.jpg 我想显示在欢迎页面上。我当前的徽标文件夹结构是：src/app/assets/images/logo.jpg

我的欢迎页面是：src/app/home/welcome.component.html

我尝试使用

<img src="./app/assets/images/logo.jpg" />

但 chrome 检查器显示错误

GET http://localhost:4200/assets/images/logo.jpg 404 (Not Found)

我试过了

<img src="./src/app/assets/images/logo.jpg" />
<img src="app/assets/images/logo.jpg"/>
<img src="src/app/assets/images/logo.jpg"/>

仍然不会显示图像。

我试过了

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

上一级目录，然后进入assets，还是不行

谁能告诉我哪里做错了？

Answer 1

您的 src/index.html 的相对路径是 /assets/images。所以放：

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

/assets 应该远离 /app。这样，如果您使用 angular cli 进行构建，它们将被添加到您的 /dist 文件夹中。

Answer 2

试试这个，

<img src="image/pradeep.jpg"/>

这里 image 是您的文件夹，图像名称是 pradeep.jpg。