将图像从外部文件夹加载到组件 Angular 2

Question

我正在尝试在我的 login.component.html 中加载我的徽标，但似乎无法正常工作。这是我的文件夹的结构。我希望你能帮助我。

enter image description here

Answer 1

在login.component.html

<img src="./assets/img/logo.png">

就是这样！

Answer 2

使用 css 样式将其应用于 div。

.logo {
    width: logowidthpx;
    height: logoheightpx;
    background-image: url('assets/img/logo.png');
}

并在您的组件中

<div class="logo"></div>

Answer 3

确保 index.html 文件中的基本 href 如下所示：

<base href="/">

然后您应该能够像这样访问资产文件夹：

<img src="assets/img/logo.png">

同时检查您的 package.json 文件并确保在您的项目中正确描述了资产文件夹，如下所示：

"projects": {
    "project-name": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico"
            ],
            ...

此外，您正在做的一些代码片段也会有所帮助。请 post 您尝试访问资产的位置的任何代码以及您认为可能有用的任何配置信息。

Answer 4

试试这个 -

<img src="src/assets/img/logo.png">

将图像从外部文件夹加载到组件 Angular 2

Loading Images from external folder to component Angular 2

html

angular2-forms

angular2-routing

angular