图像未通过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="/">元素，用于设置网址的基本路径。因此，您需要检查此元素href属性值。 Angular使用此元素进行路由。

关于<img>：如果src网址是相对的，则相对于href元素的<base>值将是相对的。

关于CSS 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;
}