使用Electron，我正在尝试创建一个切换图像按钮，以便在单击时在两个图像之间切换
images/img1.pngimages/img2.png
但是，使用以下代码，图像只是在单击时闪烁而不切换。
怎么了？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' 'unsafe-inline';
connect-src *">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bookmarker</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<!-- <body>
<h1>Hello from Electron</h1>
</body>
<p>
<button class="alert">Current Directory</button>
</p> -->
<h1>Bookmarker</h1>
<div class="error-message"></div>
<section class="add-new-link">
<form class="new-link-form">
<input type="image" id="img-1" class="img-btn" src="images/img1.png" onclick="Switch(this);" width=4% height=4%>
<input type="url" class="new-link-url" placeholder="URL" size="100" required>
<input type="submit" class="new-link-submit" value="Submit">
</form>
</section>
<section class="links"></section>
<section class="controls">
<button class="clear-storage">Clear Storage</button>
</section>
<script>
require('./renderer');
</script>
</html>
然后是renderer.js中的 click 事件处理程序
const { shell } = require('electron');
function Switch(img) {
// img.src = img.src == "images/img1.png" ? "images/img2.png" : "images/img1.png";
if (img.src != "images/img1.png") {
img.src = "images/img1.png"
} else {
img.src = "images/img2.png"
}
}
我认为问题是当您单击"输入图像"时，视图将刷新。 如果您将图像放在 img 标签中，这应该可以解决问题。
<form class="new-link-form">
<div>
<img id="img-1" src="images/img1.png" onclick="Switch(this)" class="img-
btn" width=4% height=4%>
</div>
<input type="url" class="new-link-url" placeholder="URL" size="100" required>
<input type="submit" class="new-link-submit" value="Submit">
</form>
带有条件(三元(运算符的脚本应该正常工作
function Switch(img) {
img.src = img.src == "images/img1.png" ? "images/img2.png" : "images/img1.png"
}
另一种可能性是像这样使用 lastIndexOf ((
.js
function switchImg2(img) {
let index = img.src.lastIndexOf("/")
let imgName = img.src.substring(index)
console.log(imgName) // /450.jpg
img.src = imgName == "/450.jpg" ? "./src/img/460.jpg" :
"./src/img/450.jpg";
}
.html
<div>
<img src="./src/img/450.jpg" alt="" onclick="switchImg2(this)">
</div>
@Cyril Wallis-Davy解决了flash问题。
问题的另一半是切换根本不起作用。
为了实现切换，我们必须在函数中使用图像的绝对路径。一种实用的方法是获取当前脚本的父文件夹并构造图像的完整路径。
// renderer.js
const { shell } = require('electron');
function Switch(img) {
let scripts = document.getElementsByTagName("script");
let srcPath = scripts[scripts.length-1].src;
let dirPath = srcPath.match(/(.*)[/\]/)[1]||'';
img.src = img.src == dirPath+"/images/img1.png" ? dirPath+"/images/img2.png" : dirPath+"/images/img1.png"
}