在打包的电子应用程序中找不到图像资产 - angular4 和 webpack

Posted 2023-03-05

【中文标题】在打包的电子应用程序中找不到图像资产 - angular4 和 webpack

【英文标题】：Image assets not found in packaged electron app - angular4 and webpack

【发布时间】：2017-12-23 23:53:22

【问题描述】：

我正在使用 Angular 和 Webpack 编写一个电子应用程序，但我遇到了一个问题，即我的唯一一个对图像的引用在构建中以某种方式出现了偏差。我怀疑这是一个 webpack 配置错误，以某种方式与 electron 运行应用程序的操作相关 - 假设实际生成的 URL 根据输出到 dist 时 .js 和 .png 文件所在的位置指向正确的目录。

图片在 login.component.html 中引用

src 目录如下所示：

src
├── app/
│   └── login/
│        ├── login.component.html
│        ├── login.component.ts
│        └── login.component.css
└── assets/
    └── images/
        └── someimage.png

dist 目录：

 dist 
   ├── assets/
   │    └── images/
   │        └── someimage.png
   ├── index.html
   ├── index.js
   ├── app.css
   └── app.js

这是我的常用配置

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

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

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

    target: "electron-renderer",

    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: /\.scss$/,
                exclude: helpers.root('src','app'),
                use: [
                    loader: ExtractTextPlugin.extract( fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' )
                ,
                
                    loader: 'css-loader',
                    options: 
                        sourceMaps: true
                    
                , 
                
                    loader: "resolve-url-loader"
                ,
                
                    loader: "sass-loader", 
                    options: 
                        sourceMaps: true
                    
                ]
            ,
            
                test: /\.scss$/,
                include: helpers.root('src','app'),
                use: [
                    
                        loader: 'raw-loader'
                    ,
                    
                        loader: "sass-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'
        ),

        new CopyWebpackPlugin([
            from: helpers.root('./src/index.js'),to: helpers.root('./dist/index.js'),
            from: helpers.root('./package.json'),to: helpers.root('./dist/package.json')
        ])
    ]
;

和我的产品与上述合并

const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const commonConfig = require('./webpack.common.js');
const helpers = require('./helpers');
const ElectronConnectWebpackPlugin = require('electron-connect-webpack-plugin');
const path = require('path');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, 
  output: 
    path: helpers.root('dist'),
    filename: '[name].js',
    chunkFilename: '[id].[hash].chunk.js'
  ,

  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),

    new ExtractTextPlugin('[name].[hash].css'),
    new webpack.DefinePlugin(
      'process.env': 
        'ENV': JSON.stringify(ENV)
      
    ),
    new webpack.LoaderOptionsPlugin(
      htmlLoader: 
        minimize: false // workaround for ng2
      
    )
  ]
);

【参考方案1】：

事实证明，index.html 缺少 <base href="./"> - 添加了这个并且 URL 解析正确

【讨论】：

我的模板中的相对引用也有同样的问题。即在我的 login.html 中，我有这个 "src="../assets/img/auth0.png"" 不适用于我的电子应用程序，因为资产文件夹位于根级别。你能帮助我吗？因为我不明白你的回答。谢谢！

@MarBVI 我已经更新了答案，省略了反引号，因此代码无法正确显示！ - 哎呀

我不知道，但我会发这篇文章，可能对您的问题有所帮助。 How to load image (and other assets) in Angular an project?

如果您不想更改 index.html 文件中的 href，您可以在构建应用时使用以下内容ng build --base-href ./ --configuration=production

【参考方案2】：

您使用的图片路径错误。

在 Angular 项目中，您不必添加相对路径 您的文件到图像文件。

Angular 为您解决了这个问题，在组件中，您必须 只添加 assets 文件夹的路径，而不是 ../../assets。

✅此代码将工作：

<img src="assets/img.jpg" >

⛔ 并且此代码将不起作用：

<img src="../../assets/img.jpg" >