时间戳

首页 > 解决方案 > Angular 7 组件在 html 上显示图像的问题。为什么图片不显示？

html - Angular 7 组件在 html 上显示图像的问题。为什么图片不显示？

问题描述

我在做一个点击猫游戏，当我使用img把猫图片的路径放到组件的模板中时，运行页面时图片没有出现。

我尝试使用 [img]="path" 将 img 作为属性，并直接输入 img 元素的路径

模板： 

<div>{{catName1}}</div>
<div>
    <img src="./image/cat.jpg" (click)="clickUp()">
</div>
<div>{{catClick1}}</div>
</div>

打字稿

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {

  catName1 = 'Misho';
  catImg1 = 'image/cat.jpg';
  catClick1 = 0;

  clickUp(){
    this.catClick1 += 1;
  }

}

它是如何显示的

图像文件夹

标签： htmlangularimagetypescriptangular6

解决方案

您的代码一切正常。

只需将您的图像文件夹从

/src/app/image

到

/src/assets

目录并更改srcin

app.component.html

推荐阅读