- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法始终如一地在 Electron 中加载图像。我将 Electron Forge 与 webpack 模板一起使用 https://www.electronforge.io/templates/webpack-template
我的 src 目录如下所示:
├── images
│ └── black.png
├── index.css
├── index.html
├── index.js
├── main.js
└── renderer.js
我的 HTML 代码如下所示:
<img src="images/black.png">
我正在使用 copy-webpack-plugin
复制 images
目录。
在开发中运行时(npm run start
),开发服务器的根目录是 .webpack/renderer
,因此图像会加载。在生产中运行时(npm run package
)HTML 文件从文件系统打开,因此图像标签试图访问 .webpack/renderer/main_window/images
位置错误,无法加载。
我已经通过以下方式让它在开发和生产中发挥作用:
<img src="../images/black.png">
这是一种 hacky 方式,不符合文件在 src 目录中的存储方式。这应该很简单,但我花了几个小时试图弄明白,但还没有真正的解决方案。
我在这些链接中看到了一个解决方案,但如果不在路径前面加上“../”,我就无法在开发和生产中使用它。
https://github.com/electron-userland/electron-forge/issues/1196
https://github.com/electron-userland/electron-forge/issues/941
我可以想出几种方法来解决这个问题:
.webpack/renderer/main_window
我看到了将图像导入 renderer.js
的建议,但我有几千张图像。我应该这样做吗?
import './images/1.png';
import './images/2.png';
import './images/3.png';
// ...
import './images/1000.png';
有没有办法以编程方式导入?像这样的东西:
let imageMap = {};
for (let i of Iter.range(1, 1001)) {
let image = import(`./images/${i}.png`);
imageMap[i] = image;
}
那我如何在 HTML 中引用它呢?不用DOM编辑代码能做到吗?
我不想将我的图像导入我的 JavaScript 文件并通过 webpack 加载器运行它们。我只想以一种既适用于开发又适用于生产的方式从我的 HTML 代码中引用静态文件。
我还有一个 5MB 的 JSON 文件,我需要使用 fetch()
访问它。我尝试通过加载程序导入它,但构建过程花费了 5 多分钟,我将其终止。
加载静态文件是制作网页的基本部分,应该是项目模板的一部分,除非我遗漏了一些非常明显的东西。
最佳答案
我能够通过在生产环境中为 renderer
目录运行静态 Express 服务器来解决这个问题。我对图像标签使用绝对路径 (/images/foo.png),并且可以访问我的静态文件。
webpack.renderer.config.js
const path = require('path');
const rules = require('./webpack.rules');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const assets = ['data', 'images'];
const copyPlugins = assets.map(asset => {
return new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'src', asset),
to: asset
}
]);
});
module.exports = {
module: {
rules: [
...rules,
],
},
plugins: [
...copyPlugins,
]
};
main.js
import { app, BrowserWindow } from 'electron';
import path from 'path';
import express from 'express';
function isDebug() {
return process.env.npm_lifecycle_event === 'start';
}
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1200,
height: 740,
});
if (isDebug()) {
// Create the browser window.
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
mainWindow.webContents.openDevTools();
} else {
const exApp = express();
exApp.use(express.static(path.resolve(__dirname, '..', 'renderer')));
const server = exApp.listen(0, () => {
console.log(`port is ${server.address().port}`);
mainWindow.loadURL(`http://localhost:${server.address().port}/main_window/`);
});
}
};
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
关于webpack - 不能在电子锻造中使用静态文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60839621/
我是 javascript 的新手(今天开始弄乱它)。 我正在尝试更改名为“bar”的元素(div)的高度。条形图将成为图表的一部分。 我可以毫无问题地将按钮连接到更改栏高度的函数。一切正常,除了条形
错误 -> “UIVIew”没有名为“addSubView”的成员 override func viewDidLoad() { super.viewDidLoad() // Do an
我在命令行工具项目中复制并粘贴了 main.swift 下面链接中的代码。 How do you use CGEventTapCreate in Swift? 它构建没有错误,但是当我运行时, gua
我在尝试编译我的代码时遇到以下错误。 ERROR! ..\myCode\CPOI.cpp:68:41: error: cannot dynamic_cast 'screenType' (of type
我正在尝试将多个字符串连接到一个我已为其分配内存的字符串指针。这是一个例子: char *finalNumString = malloc(sizeof(char)*1024); finalNumStr
我在使用 dup2() 和 pipe() 时遇到问题。 当我尝试将管道的写入端 dup2 到 STDOUT_FILENO 时,我收到了 EBADF。 我用 gdb 在 dup2(pout[1], ST
首先,我应该说我运行的是 Windows 7。 因此,今天早上我尝试像往常一样从我的存储库中提取数据,但我做不到。我得到了错误: The authenticity of host 'github.co
刚开始在虚拟环境中运行Python,乱用Django,无法激活虚拟环境。 花了最后 4 个小时尝试在本地终端/VS 代码上激活虚拟环境 (venv),但没有成功。 避免使用“sudo pip inst
Tidyverse 的粉丝经常给出使用小标题而不是数据框的几个优点。它们中的大多数似乎旨在保护用户免于犯错误。例如,与数据框不同,小标题: 不需要 ,drop=FALSE不从数据中删除维度的论据。 不
我一直在对 Elm 应用程序进行 docker 化时遇到问题。据我所知,我已经创建了一个完整且有效的 Docker 文件……但它不起作用。 我会解释的。 所以我的脚本在 3 个文件中运行。 首先是启动
我可以在 Controller 中使用@Autowired,例如 @RestController public class Index { @Autowired HttpServlet
我定义了一个方法和一个函数: def print(str:String) = println val intToString = (n:Int) => n.toString 现在我想创作它们。 我的问
当我控制台单独记录变量“pokemons”时,它确实返回一个数组。但是当我尝试映射它时,出现错误: TypeError: pokemons.map is not a function 我的代码: im
每当我尝试在 Python 解释器中导入 smtplib 时,都会收到此错误: ImportError: cannot import name fix_eols 我该如何解决这个问题? 编辑:这是完整
我正在使用 Meteor.js 开发一个项目,但在使用 Handlebar 时遇到了一些问题:我想检索集合的最后一项,并显示字段:其中包含 html 的文本: 这是我的javascript代码: Te
你好,我想使用 Service 实现 GestureDetector 但是我有这个错误The method onTouchEvent(MotionEvent) of type GestureServi
我正在尝试在 Controller bean 中 Autowiring 接口(interface) 在我放置的上下文配置文件中 和 我的 Controller 类是 @Controller pub
我试图在 mainwindow.cpp 中包含 QtSvg,但是当我编译时它说无法打开包含文件:QtSvg。我已经在我的 *.pro 文件中添加了这个(QT += svg)。我可以知道可能是什么问题吗
鉴于以下 PostgreSQL 代码,我认为这段代码不容易受到 SQL 注入(inject)攻击: _filter 'day' _start 1 _end 10 _sort 'article_name
我想执行以下操作。这在 MySQL 中是非法的。 PostGRESQL 中关联的 CTE(“with”子句)有效。这里的假设是 MySQL 中的子查询不是完全限定的 CTE。 请注意:这个查询显然非常
我是一名优秀的程序员,十分优秀!