Como atualizar src de um img a partir de javascript em um projeto de estrutura de jogo?

Eu tenho uma imagem no meu arquivo HTML como esta.

<img src="@routes.Assets.versioned("images/bell.png")" width="200", height="200" id = "symbolImg">

O arquivo de imagem é armazenado aqui.

Resultado

Eu estava tentando alterar a imagem tendo o seguinte código em um arquivo datilografado.

document.getElementById("changeImageBtn").addEventListener("click", function () {
    document.getElementById("symbolImg").setAttribute("src", "@routes.Assets.versioned('images/cherry.png')" );
    document.getElementById("symbolImg").setAttribute("width", "300");
    document.getElementById("symbolImg").setAttribute("height", "300");
});

Mas a imagem não muda. Essa é a saída.

Editar 1

Também tentei essas maneiras com caracteres de escape. Não teve efeito.

 document.getElementById("symbolImg").setAttribute("src", "@routes.Assets.versioned(\"images/bell.png\")" );

.

document.getElementById("symbolImg").setAttribute("src", "@routes\.Assets\.versioned\(\"images/bell\.png\"\)" );

questionAnswers(2)

yourAnswerToTheQuestion