Переключить изображение не может переключаться и мигает всю страницу при нажатии с электроном - PullRequest
Новая
       0

Переключить изображение не может переключаться и мигает всю страницу при нажатии с электроном

0 голосов
/ 05 февраля 2020

С помощью 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"
    }
}

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

Я думаю, что проблема в том, что когда вы нажимаете на свое «входное изображение», представление обновляется sh. Если вы поместите свое изображение в тег img, это должно решить проблему.

image

Ваш скрипт с условным (троичным) оператором должен работать нормально 

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

image
0 голосов
/ 06 февраля 2020

@ Сирил Уоллис-Дэви решил проблему с флагом sh.

Другая половина проблемы заключалась в том, что переключение просто не работает.

Чтобы переключение произошло, мы должны использовать абсолютные пути для изображений в функции. Практическим способом является получение родительской папки текущего скрипта и создание полных путей к изображениям. 


// 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"
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...