Toggle image fails to toggle and flashes the whole page on clicking with Electron
Question
With Electron, I'm trying to create a toggle image button to switch between two images on clicking
images/img1.png-
images/img2.png
However, with the following code, the image simply flashes on clicking without switching.
What's wrong?
<!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>
Then the click event handler in renderer.js
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"
}
}
2 answers
solution1
1 2020-02-05 17:41:38
I think the problem is that when you click on your "input image" the view will refresh. If you put your image in an img tag this should fix the problem.
<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>
Your script with conditional (ternary) operator should work normally
function Switch(img) {
img.src = img.src == "images/img1.png" ? "images/img2.png" : "images/img1.png"
}
Another possibility is to use lastIndexOf () like this
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>
solution2
0 2020-02-06 13:40:25
@Cyril Wallis-Davy solved the flash problem.
The other half of the problem was that the toggle simply doesn't work.
To make the switch happen, we have to use absolute paths for images in the function. A practical way is to get the parent folder of current script and construct the full paths to the images.
// 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"
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.