javascript - 切换图像无法切换，并在单击Electron时闪烁整个页面

使用Electron，我试图创建一个切换图像按钮，以在单击时在两个图像之间切换

images/img1.png

images/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中单击事件处理程序


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

最佳答案

我认为问题在于，当您单击“输入图像”时， View 将刷新。
如果将图像放在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>