Angular2 + webpack不显示图像

我跟着Angular2 webpack tutorial，但似乎应用程序无法加载任何图像。这是我的应用程序的目录结构：Angular2 + webpack不显示图像

... 

/dist/ 
/src/assets/images/ 
/src/assets/css/ 

...

这是对文件配置中的WebPack配置/ webpack.common.js：

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
    entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
    }, 

    resolve: { 
    extensions: ['.ts', '.js'] 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.ts$/, 
     loaders: [{ 
      loader: 'awesome-typescript-loader', 
      options: { configFileName: helpers.root('src', 'tsconfig.json') } 
     } , 'angular2-template-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: 'html-loader' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
     loader: 'file-loader?name=assets/[name].[hash].[ext]' 
     }, 
     { 
     test: /\.css$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' }) 
     }, 
     { 
     test: /\.css$/, 
     include: helpers.root('src', 'app'), 
     loader: 'raw-loader' 
     } 
    ] 
    }, 

    plugins: [ 
    // Workaround for angular/angular#11580 
    new webpack.ContextReplacementPlugin(
     // The (\\|\/) piece accounts for path separators in *nix and Windows 
     /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
     helpers.root('./src'), // location of your src 
     {} // a map of your routes 
    ), 

    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'vendor', 'polyfills'] 
    }), 

    new HtmlWebpackPlugin({ 
     template: 'src/index.html' 
    }) 
    ] 
};

现在，如果我尝试一些图像添加到模板：

<img src="/assets/images/hp-logo.png">

编译过程中，我总是收到以下错误（运行时npm start）：

ERROR in ./src/app/templates/dashboard.component.html 
Module not found: Error: Can't resolve './assets/images/hp-logo.png' in '/frontend/src/app/templates' 
@ ./src/app/templates/dashboard.component.html 1:582-620 
@ ./src/app/components/dashboard.component.ts 
@ ./src/app/modules/app.module.ts 
@ ./src/main.ts 
@ multi (webpack)-dev-server/client?http://localhost:3000 ./src/main.ts

我想这事做与文件加载但尝试不同的配置后，我无法得到它的工作。

有人能帮我解决这个问题吗？

来源

2017-03-02 Ander

你试过“../../assets/images/hp-logo.png”吗？ – ssougnez

您应该写出相对于模板位置的图像路径。如果您的模板是例如在/src/module1/template.html那么你的图像位置应该是

<img src="../assets/images/hp-logo.png">

来源

2017-03-02 08:03:15 smnbbrv

我不同意你的看法。您的解决方案可能会在开发环境中工作，但在webpack创建块文件时，生产环境中不会生效。 –

你试过了吗？它确实可以在生产环境中正常工作，因为每个图像请求都由HTML加载程序解析，并且webpack会将所有图像放到'file-loader'中配置的路径中。你的解决方案增加了更多的复杂性，而且绝对没有必要 – smnbbrv

是的，我做到了。对我而言，它在两种环境下只能使用。 –

尝试增加：

new CopyWebpackPlugin([{ 
    from: 'src/assets', 
    to: 'assets', 
}, { 
    from: 'src/meta', 
},])

到plugins数组里面的webpack.common.js。

来源

2017-03-02 08:08:29

非常感谢，它为我工作很多:)，简单的方法来解决这个 – blackend

角启动器存储库使用此解决方案 – mauris

Angular2 + webpack不显示图像

回答

相关问题