如何使用 TypeScript 4.1.2 在 Angular 6 中绑定 img src

Question

我正在使用 Angular6 和 typeScript4.1.2 并尝试从 app.component.ts 加载图像并将其绑定到 app.component.html 但图像没有显示。奇怪的是，当我尝试直接在 app.component.html 中加载它时，图像是可见的。请帮助我了解 app.component.ts 中缺少的内容

\n

应用程序组件.ts：

\n

declare function require(path:string):string;\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\n\nexport class AppComponent {\n  title = 'angular-ui';\n  imagesrc = require('../assets/images/myimage.png');\n}\n

\n

应用程序组件.html：

\n

<nav\xc2\xa0class="navbar navbar-expand-lg navbar-light bg-light">\n  <div class="container-fluid">\n    <div class="navbar-header">\n      <a class="navbar-brand" href="#">        \n        <img src={{imagesrc}} height="26"/>\n        <!-- <img src="../assets/images/myimage.png" height="26"/> -->\n      </a>\n      Test\n    </div>\n  </div>\n</nav>\n

\n

我已经尝试了几乎所有组合来访问 app.component.ts 中的 myimage.png 但这些都不起作用

\n

imagesrc = require('../assets/images/myimage.png');\nimagesrc = require('/assets/images/myimage.png');\nimagesrc = require('assets/images/myimage.png');\n

\n

我也尝试过使用自动完成功能，但 Visual Studio 代码在 ../assets/images/ 之后没有显示任何建议

\n

并且资产路径已经在 Angular.json 中设置

\n

"assets": [\n          "src/favicon.ico",\n          "src/assets"              \n],\n

\n

Answer 1

我认为你不需要打电话require。尝试直接绑定路径

控制器

export class AppComponent {
  title = 'angular-ui';
  imagesrc = '../assets/images/myimage.png';
}

模板

<img [src]="imagesrc" height="26"/>