角度 2 中的图像，webpack 给出 404答案

【问题标题】：image in angular 2 with webpack giving 404角度 2 中的图像，webpack 给出 404
【发布时间】：2017-07-25 14:35:45
【问题描述】：

我正在尝试将图像放入我的项目中，但我不断收到 404，我已经在 webapck 中设置了配置，但没有解决。

spiLogo.jpg:1 GET http://localhost:4200/imagens/spiLogo.jpg 404（未找到）

index.html

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <title>TheGreatCthulhu</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="src/favicon.ico">
  <link rel="" type="image/jpg" href="src/app/imagens/spiLogo.jpg">
</head>
<body>
  <app-root></app-root>
</body>
</html>

我的导航栏.component.html

<!-- Dropdown Structure -->
            <ul id="dropdown1" class="dropdown-content">
                  <li routerLinkActive="active"><a routerLink="/usuarios">Usuários</a></li>
                  <!--<li routerLinkActive="active"><a routerLink="/usuarios">Usuários</a></li>-->
                  <li routerLinkActive="active"><a routerLink="/grupoUsuarios">Grupo de Usuários</a></li>
                  <li routerLinkActive="active"><a routerLink="/usuarios">Entidades</a></li>
                  <li routerLinkActive="active"><a routerLink="/usuarios">Turno</a></li>
                  <li routerLinkActive="active"><a routerLink="/usuarios">Metas</a></li>
                  <li routerLinkActive="active"><a routerLink="/usuarios">Display</a></li>
                  <li routerLinkActive="active"><a routerLink="/usuarios">Perfis</a></li>
                  <li routerLinkActive="active"><a routerLink="/usuarios">Monitor de Estados</a></li>
            </ul>

        <nav>
            <div class="nav-wrapper">
              <a routerLink="" class="brand-logo right"><img [src]="urLogo" alt="spi_logo"/></a>
              <ul id="nav-mobile" class="left hide-on-med-and-down">
                <!--<li><a routerLink=""></a></li>-->
                <li routerLinkActive="active"><a routerLink="/login">Login</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Cadastro<i class="material-icons right"></i></a></li>
              </ul>
            </div>
          </nav>

我的导航栏组件.ts

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


@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent implements OnInit {

  urLogo: string = "../../imagens/spiLogo.jpg";

  constructor() { }

  ngOnInit() {
  }

}

我的 webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{ 'app': './src/main.ts'},
    output:{ filename: 'app.js'},
    module: {
    //  loaders: [
      //      { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file-loader" }
        //],
        rules: [
            {
                test: /\.pug$/,
                loader: [
                    "pug-loader?self",
                ]
            },
            {
                test: /\.css$/,
                loaders: [
                    "style-loader",
                    "css-loader"
                ],
            },
            {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loaders: [
            'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack-loader'
        ]},
            {
                test: /\.html$/,
                loader: "html-loader",
                options: {
                    attrs: [':custom-src']
                }
            }
        ]
    },
    plugin: [
        extractPlugin,
        new htmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

图片所在的文件夹 image location

【问题讨论】：

标签： image webpack angular2-template

【解决方案1】：

尝试在 webpack.config 输出中添加 publicPath：

output:{ 
     filename: 'app.js',
     publicPath: '/'
}

看看它是否给出了不同的错误？

【讨论】：

我添加了，但什么也没发生。我认为问题出在路径上，但我不知道究竟是什么路径。也许与 base href="" 中的路径有关