图像未通过 html 中的 img 标签加载

Question

我有一个项目，我正在尝试通过 html 文件中的 img 标签将图像添加到组件中，该文件位于 angularNode7Teste/thumbsup-jpg（应用程序根文件夹）中。组件文件位于 angularNode7Teste/src/app 文件夹中。

这是我的 app.component.html 中的代码：

<h1>
 {{title}}
</h1>

<input type="button" class="btn btn-default" value="Send" >
<img src="../../thumbs-up.jpg"/>
<div class="image"></div>

这是 app.component.css 文件：

div.image {
    content: url(../../thumbs-up.jpg);
}

<img src="../../thumbs-up.jpg"/>中的图片不渲染，但div标签<div class="image"></div>正常渲染。

两个标签中的图像是相同的，我引用同一个图像来查看它是否有效，但它没有。

Answer 1

Angular index.html 包含 <base href="/"> 元素，它为您的 URL 设置基本路径。所以你需要检查这个元素href 属性值。 Angular 将此元素用于路由目的。

关于<img>：如果src URL 是相对的，那么就<base> 元素的href 值而言将是相对的。

关于 CSS url(): URL 将与 CSS 文件相关。

示例：

在 src/assets/img/mypic.jpg 的 Angular CLI 项目中拥有一个图像。

那么这将起作用<img src="assets/img/mypic.jpg" />。

对于位于src/app/app.component.css 的 CSS 文件，以下内容有效：

.pic {
  background-image: url('../assets/img/mypic.jpg');
  width: 256px;
  height: 256px;
}