角2中的圖像與webpack給404

我想把圖像放在我的項目中，但我一直得到404，我已經在webapck中設置配置，並沒有解決。角2中的圖像與webpack給404

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>

我的NAV-bar.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>

我的導航欄，component.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

來源

2017-07-25 Fernanda Rachel Del Bel

嘗試添加一個公共路徑到您的webpack.config輸出：

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

看看它是否給出了不同的錯誤？

來源

2017-07-25 16:36:27 vidalsasoon

我補充說，但沒有發生任何事。我認爲問題與道路有關，但我完全不知道什麼路徑。也許有一些與基地href =「」的路徑 –

角2中的圖像與webpack給404

回答

相關問題