image in angular 2 with webpack giving 404 -
i trying put image in project keep getting 404, set config in webapck , didn't solve .
spilogo.jpg:1 http://localhost:4200/imagens/spilogo.jpg 404 (not found)
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> my 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> my nav-bar-component.ts
import { component, oninit } '@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() { } } my 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' }) ] }; my folder image image location
try adding publicpath webpack.config output:
output:{ filename: 'app.js', publicpath: '/' } see if gives different error?
Comments
Post a Comment