- 说明**
我正在为我的大学项目创建一个"危险"游戏的副本,并选择了电子+React+Webpack的 typescript 。(在. json中制作)来播放,场景通常会涉及一些图像。显然,最好动态加载场景,这样我就不需要为每个场景重新构建整个应用程序。因此,我也需要动态加载图像。
- 实际行为**
我在dev env中完成了所有的工作,把图像放在一个文件夹中,然后通过require.context
按名称加载它们。但是在应用程序打包后,我发现所有的图像都被移到了resources\app\.webpack\renderer\
中,并且它们的名称被更改为:f9cbb866db6c9b73d628c76a72d55bc7.jpg
。所以,我相信,我所有的代码只是优化了,使图像现在是静态的。
- 预期行为**
打包后的图像应该保留在某个旧名称的文件夹中,以便我可以更改场景中的图像和引用。
- 代码**
这是用于加载:
function importAll(r: any) {
let images = {};
// @ts-ignore
r.keys().map((item: string, index: any) => { images[item.replace('./', '')] = r(item); });
return images;
}
// @ts-ignore
const images = importAll(require.context("../assets", false, /\.(png|jpe?g|svg)$/));
这是为了表示:
<img src={images[this._question.imagePath].default}></img>
1条答案
按热度按时间4si2a6ki1#
我设法解决它使用一些官方文件:
首先,我改变了程序加载图像的方式:现在有一个选择目录的按钮和一个选择脚本文件的按钮。2完成后,程序评估所选目录的内容:
这就是选择目录的方法:
以下是评价:
现在我有了Map中所有图片的URL,它们的名字作为键。完成后,我可以只使用图片的名字从Map中获取它:
这看起来很完美,但是我遇到了一个安全策略问题,它不允许我加载图像,所以我在
forge.config.ts
文件中添加了这一行:这一行来自GitHub上问题的答案:https://github.com/electron/forge/issues/2331,应按如下方式放置:
我也将assets文件夹从用户文档的workspace文件夹中移走,这样编译器和构建器就不会看到它们,也不会优化它们。感谢@ Alexandria 的帮助