切换图像无法切换并在使用 Electron 单击时闪烁整个页面

Question

With Electron, I'm trying to create a toggle image button to switch between two images on clicking使用 Electron，我正在尝试创建一个切换图像按钮，以在单击时在两个图像之间切换

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然后是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"
    }
}

Answer 1

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.如果您将图像放在 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>

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另一种可能是像这样使用 lastIndexOf()

js 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 html

 <div>
     <img src="./src/img/450.jpg" alt=""  onclick="switchImg2(this)">
 </div>

Answer 2

@Cyril Wallis-Davy solved the flash problem. @Cyril Wallis-Davy 解决了闪存问题。

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"
}

切换图像无法切换并在使用 Electron 单击时闪烁整个页面

问题描述

2 个解决方案

解决方案1
1 2020-02-05 17:41:38

解决方案2
0 2020-02-06 13:40:25

切换图像无法切换并在使用 Electron 单击时闪烁整个页面

问题描述

2 个解决方案

解决方案1 1 2020-02-05 17:41:38

解决方案2 0 2020-02-06 13:40:25

解决方案1
1 2020-02-05 17:41:38

解决方案2
0 2020-02-06 13:40:25