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

Question

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

enter image description here

Answer 1

确保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"
            ],
            ...

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

Answer 2

in login.component.html

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

就这样！

Answer 3

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

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

以及您的组件中

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

Answer 4

尝试一下-

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