无法使用 dotnet angular webpack 加载图像

Question

我关注了"Building Single Page Applications on ASP.NET Core with JavaScriptServices" 博客文章。由此我能够创建一个在 ASp.NET Core 上运行的新 Angular2 模板。该应用程序运行良好并使用 webpack（不知道这是可能的）。

dotnet new angular    
dotnet restore    
npm install    
dotnet run

我试图弄清楚如何将img 添加到角度模板并为其提供已知的src url - 它可以工作。对于我的生活，我无法弄清楚这一点。这里是webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        output: {
            filename: '[name].js',
            publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: { 'main-client': './ClientApp/boot-client.ts' },
        output: { path: path.join(__dirname, clientBundleOutputDir) },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: { mainFields: ['main'] },
        entry: { 'main-server': './ClientApp/boot-server.ts' },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ],
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

组件

import { Component } from '@angular/core'

@Component({
    selector: 'example',
    template: `<img src='dist/myimg.png' />`
})
export class ExampleComponent { }

更新

我发现了这个SO Q&A，它有助于澄清一些事情。现在的问题是我需要动态获取图像。

Steve 回答了与他的 Angular2 + ASP.NET Core 模板有关的问题。我想知道如何动态地而不是静态地做到这一点。我想使用 Angular2 绑定并从服务器获取图像名称，然后将其绑定到img src。任何关于如何做到这一点的想法将不胜感激。似乎 webpack 需要提前知道它以便捆绑

Answer 1

将图像放入 wwwroot/dist 然后...

template: "<img src='dist/myimg.png' />"