如果在Electron的开发模式下可以正常显示图片,但在编译后的版本中却不能显示图片,有可能是因为在webpack打包时,没有正确地配置文件路径,导致无法正确地加载文件。需要在webpack配置文件中加入以下代码:
const path = require('path');
{
// ...
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
publicPath: path.join(__dirname, 'build', 'images')
}
}
]
}
]
}
}
其中需要注意的是,这里假设图片文件夹在项目根目录下的images文件夹内,输出文件夹为build/images,如果不是这样的话,需要将代码进行相应的修改。