切換圖像無法切換並在使用 Electron 單擊時閃爍整個頁面

Question

使用 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的 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

我認為問題在於當您單擊“輸入圖像”時，視圖會刷新。 如果您將圖像放在 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>

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

切換圖像無法切換並在使用 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