Bild in eckigen 2 mit Webpack geben 404

Ich versuche, ein Bild in meinem Projekt zu setzen, aber ich bekomme 404, habe ich bereits die Konfiguration in Webapck und löste nicht.Bild in eckigen 2 mit Webpack geben 404

spiLogo.jpg: 1 GET http://localhost:4200/imagens/spiLogo.jpg 404 (nicht gefunden)

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>

Mein 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>

Mein nav-Bar-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() { 
    } 

}

Mein 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' 
     }) 
    ] 
};

Mein Ordner, in dem Bild sind image location

Quelle

2017-07-25 Fernanda Rachel Del Bel

Versuchen Sie hinzuzufügen ing eine publicPath auf Ihre webpack.config Ausgabe:

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

Prüfen Sie, ob es einen anderen Fehler gibt?

Quelle

2017-07-25 16:36:27 vidalsasoon

Ich fügte hinzu, aber nichts passierte. Ich denke das Problem ist etwas mit dem Pfad, aber ich weiß nicht genau welchen Pfad. Vielleicht etwas mit dem Pfad in der Basis href = "" –

Bild in eckigen 2 mit Webpack geben 404

Antwort

Verwandte Themen