PHP + MYSQL + AJAX = Troca de imagens

Obrigado pela ajuda, em HTML e PHP não tive qualquer dificuldade, porem não resulta para aquilo que pretendo, pois assim que seleciono uma opção a página faz refresh e todas as opções e campos preenchidos ficam em branco novamente, já em javascript não consegui executar o código pois não tenho bem a certeza do que escrever na pagina script.php ( penso que seja o código em PHP ou HTML correto?).

Mais uma vez obrigado

Boas, vou postar aqui o meu código para perceberem aonde está o meu erro:

HTML

<select id="nomes">
<option value="CD01">CD01</option>
<option value="CD21">CD21</option>
<option value="CD24">CD24</option>
</select>

<img id="imagem" src="" alt="Imagem">

<script src="script.js"></script>


PHP

<?php

// Recebendo o nome
$nome = $_POST['nome'];

// Conectando ao banco de dados
$con = mysqli_connect("localhost", "cadife", "U19mg7378243199","bd_technicdoor");

// Buscando a imagem
$sql = "SELECT foto_painel FROM tb_preco_97 WHERE modelo = '$nome'";
$resultado = mysqli_query($$con, $sql);
$imagem = mysqli_fetch_assoc($resultado)['foto_painel'];

// Fechando a conexão
mysqli_close($conexao);

// Retornando a imagem
header('Content-Type: image/jpeg');
echo $imagem;

?>


Javascript

const selectNomes = document.getElementById('nomes');
const imagem = document.getElementById('imagem');

selectNomes.addEventListener('change', () => {
const nome = selectNomes.value;

const xhr = new XMLHttpRequest();
xhr.open('POST', 'verificar2.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = () => {
if (xhr.status === 200) {
imagem.src = `data:image/jpeg;base64,${xhr.responseText}`;
} else {
console.error('Erro ao buscar imagem.');
}
};
xhr.send(`nome=$`);
});

Boas, a linha $nome = $_POST['nome']; no PHP não está a receber a variavel do option consegue perceber qual o erro?