图像没有通过img标签加载到html

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

这里是我的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"/>的图像不renderize，但div标记<div class="image"></div>正常呈现。

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

来源

2017-05-04 William

角index.html包含设置您的网址的基本路径的<base href="/">元素。所以你需要检查这个元素href的属性值。 Angular使用此元素进行路由。

关于<img>：如果src URL是相对然后将相对于在相对于<base>元件的href值。

关于CSS url()： URL将相对于CSS文件。

实施例：

具有位于角CLI项目在src/assets/img/mypic.jpg的图像。

然后这将工作<img src="assets/img/mypic.jpg" />。

对于位于src/app/app.component.css的CSS文件中的以下将是有效的：

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

来源

2017-05-04 15:23:46 andreim

只能将资产文件夹内您的图像？我试图将资源文件夹中的图像移动到app.component.html文件中，并且它可以工作，但是如果图像不在该文件夹中，则不会重新渲染。 – William

@威廉是的，所有的资产都需要在该文件夹中。实际上，这可以从'.angular-cli.json'配置，请检查'assets'属性。配置模式可用[这里]（https://github.com/angular/angular-cli/wiki/angular-cli）。最终，应用程序将被构建，因此使用webpack捆绑css和js并将资产分开放置。进行生产时，您将执行“build --prod”，而'dist'文件夹将包含可放置在服务器上的构建版本。您可以检查该文件夹的内容以查看是否适合您。 – andreim

图像没有通过img标签加载到html

回答

相关问题