Question

通常我是后端开发者但是开始学习前端的东西。我从Angular教程制作了示例应用程序，现在尝试构建我自己的小应用程序。

我遇到了简单的问题 - 当我尝试加载静态图片（例如徽标）时，它会返回404错误代码。看起来我错过了一些配置，我不知道它是什么。

加载图片代码：

<img src="images/logo.png" alt="Logo" width="48" height="48"/>

结构：

web
- app
-- assets
-- images
-- js
-- model
-- stylesheets
-- *.ts
-- *.html
-- *.css
-- main.ts
-- polyfills.ts
-- rxjs-extensions.ts
-- vendor.ts
- config
- dist
- index.html
- packages.json
- tsconfig.json
- typings.json
- webpack.config.js

的package.json

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --display-error-details --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "postinstall": "typings install"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "2.0.1",
    "@angular/compiler": "2.0.1",
    "@angular/core": "2.0.1",
    "@angular/forms": "2.0.1",
    "@angular/http": "2.0.1",
    "@angular/platform-browser": "2.0.1",
    "@angular/platform-browser-dynamic": "2.0.1",
    "@angular/router": "3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23",
    "assets-webpack-plugin": "^3.4.0"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0",
    "copy-webpack-plugin": "^3.0.1"
  }
}

配置/ 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': './app/polyfills.ts',
        'vendor': './app/vendor.ts',
        'app': './app/main.ts'
    },

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

    module: {
        loaders: [
            {
                test: /\.(png|jpg|jpeg|gif|svg|ico)$/,
                loader: 'file'
            },
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('app'),
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
            },
            {
                test: /\.css$/,
                include: helpers.root('app'),
                loader: 'raw'
            }
        ]
    },

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

        new HtmlWebpackPlugin({
            template: 'index.html',
            inject: 'body'
        }),
    ]
};

webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const webpack = require('webpack');

const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');

module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',

    debug: true,

    output: {
        path: helpers.root('app'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('[name].css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

的index.html

<html>
<head>
    <base href="/">
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<catalog-root>Loading...</catalog-root>

</body>
</html>

Answer 1

在{{index}}之前添加/。所有路径都是相对于root的，因为您的SPA位于根目录images，我认为。

如果没有，请在index.html

中添加您的基本网址

<head>

另外，请检查您是否正在网络包中正确复制资产：

<base href="<%= webpackConfig.metadata.baseUrl %>">

const CopyWebpackPlugin = require('copy-webpack-plugin');

Answer 2

尝试使用相对路径。例如，如果在main.ts中：

<img src="./images/logo.png" alt="Logo" width="48" height="48"/>

Answer 3

尝试将图片保存在角度应用的“src”文件夹中的“assets”文件夹中。然后尝试使用HTML中的assets/myImage.jpg和CSS

中的/src/assets/myImage.jpg

无法使用Angular2和webpack加载静态图像

3 个答案: