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

Question

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

enter image description here

Answer 1

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

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

并在您的组件中

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

Answer 2

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

<base href="/">

然后你应该能够访问资产文件夹，如下所示：

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

还要检查你的package.json文件并确保在你的项目中正确描述了assets文件夹，如：

"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 3

在login.component.html中

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

而已！

Answer 4

试试这个 -

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