Не могу добиться чтоб картинка менялась по клику с помощью JS, точнее получается, но только если использовать абсолютный путь (http://127.0.0.1:5500/pics/Mobile_menu_icon.png таким образом получается, использую Live server), но проблема в том что при залитии на хостинг придется переписывать этот скрипт, как использовать относительный путь? Я уже все перепробовал(
HTML
<ul class="mobile_menu" id='mobileMenu'>
<li><a href="">Скачать</a></li>
<li><a href="">Тарифы</a></li>
<li><a href="">Вход</a></li>
<li><a href="">Регистрация</a></li>
</ul>
<div><img src="pics/Mobile_menu_icon.png" alt="menu" class='mobile_icon' id="burgerIcon"></div>
CSS
img {
display: block;
}
.mobile_icon{
display: none;
}
@media screen and (max-width: 720px){
.mobile_icon{
position: relative;
display: block;
width: 50px;
left: 25px;
top: 20px;
}
.mobile_menu{ /* это другой div, выскакивает на мобильных на весь экран */
display: none;
position: absolute;
margin: 0;
padding: 0;
background-color: white;
width: 100%;
height: 100%;
}
.show {
display: block;
}
}
JS
let burger = document.getElementById('burgerIcon'); /*иконка которую надо поменять на крестик(вместо бургера)*/
let menu = document.getElementById('mobileMenu'); /*открывает/закрывает меню ко клику на бургер*/
let switchBurger = function() {
document.getElementById("mobileMenu").classList.toggle("show");
if (burger.src=='/pics/Mobile_menu_icon.png') {burger.src='/pics/Mobile_menu_icon_close.png'} else burger.src='/pics/Mobile_menu_icon.png'; /* и вот тут собственно проблема - не работает так, burger.src возвращает абсолютный путь http://127.0.0.1:5500/pics/Mobile_menu_icon.png, но я хочу чтобы был относительный (иначе под каждый хостинг надо будет переделывать)*/
};
burger.onclick = switchBurger;