Путь к картинке для джаваскрипта в Таймлиф
Код джаваскрипта:
function fromPinkToBlue(){
document.querySelector('#img').src = '../static/images/x2coin.png'
document.querySelector('#img').setAttribute('style', 'width: 300px; height: 300px')
}
Как вы видите, я меняю расположение УЖЕ существующей картинки, но дело в том, что расположение к первому изображению прописано в тайм лиф (снизу хтмл код), а чтобы заменить картинку, путем изменения расположения к этой же картинке, нужно каким то образом прописать в хтмл и это расположение. Скрипт изменяет изображение, но сервер его не видит HTML:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="../static/css/conflip.css" th:href="@{/css/conflip.css}">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JADEN</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="../static/circle-16.ico" th:href="@{/circle-16.ico}" type="image/x-icon">
<head>
<meta charset="utf-8">
<title>Jaden</title>
</head>
<body>
<a href="javascript:show_hide('block')"><img id="img" src="../static/images/x1coin.png" th:src="@{/images/x1coin.png}" class="image" style="width: 300px; height: 300px"></img></a>
<br>
<br><input type="submit" id="flipX" value="Flip!">
</body>
<script type="module" src="../static/js/flipper.js" th:src="@{/js/flipper.js}"></script>
</html> ```
Источник: Stack Overflow на русском