我跟着"Building Single Page Applications on ASP.NET Core with JavaScriptServices"博客文章。并从中我能够创建一个新的Angular2模板运行在ASp.NET核心。该应用程序效果很好,并使用webpack(不知道这是可能的)。无法获取图像加载使用dotnet angular webpack
dotnet new angular
dotnet restore
npm install
dotnet run
我试图找出如何添加一个img
到角模板,并提供其已知src
网址 - 和它的工作。对于我的生活,我无法弄清楚这一点。这里是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要求予以提前知道,以便它捆绑在wwwroot文件/ DIST
图像路径看起来很奇怪。 〜不会被替换为应用程序根目录 - 您未提供ASP.net页面。 – KnowHoper
经过一些搜索[建议](https://github.com/vuejs/vue-loader/issues/193#issuecomment-206510064)使用它来告诉'webpack'如何处理它。如果我有''我收到一个错误,指出它无法找到图像的模块,这是疯狂的谈话。 –