切换图像无法切换并在点击 Electron 时闪烁整个页面答案

【问题标题】：Toggle image fails to toggle and flashes the whole page on clicking with Electron切换图像无法切换并在点击 Electron 时闪烁整个页面
【发布时间】：2020-05-21 12:32:50
【问题描述】：

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

【问题讨论】：

标签： javascript html css electron

【解决方案1】：

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

 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>

【讨论】：

谢谢。不幸的是，修复了闪光灯，但切换仍然没有发生。调用了 onclick 事件处理程序，但三元语句不会导致图像发生变化。
正如您在我的 codepen link 上看到的那样，它可以工作。也许您的图像路径有问题？
您的链接有效，但它使用指向图像的网络链接而不是本地图像文件。我注意到，如果我复制完全相同的代码，但使用具有 images/file.png 等相对路径的本地图像文件，那么它将无法工作。
好的，我缩小了问题范围：该函数仅适用于本地文件的绝对图像路径。但是给出绝对路径是不切实际的。我希望有一种方法可以允许问题中的相对路径。
我只是在我的 ide 中测试了代码，当我运行它时，在我的情况下，该函数也只适用于绝对图像路径

【解决方案2】：

@Cyril Wallis-Davy 解决了闪存问题。

问题的另一半是切换根本不起作用。

为了实现切换，我们必须在函数中为图像使用绝对路径。一种实用的方法是获取当前脚本的父文件夹并构建图像的完整路径。


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

【讨论】：

我使用 lastIndexOf () 而不是正则表达式的解决方案编辑了我的帖子