Problema com substituição de imagem

Olá, fiz esse script para trocar imagem, mas não funciona. Ele da esse erro no log :

**Uncaught TypeError: Cannot read property 'src' of null

	    at HTMLImageElement.<anonymous> (produto.html:197)

	    at HTMLImageElement.dispatch (jquery.js:5183)

	    at HTMLImageElement.elemData.handle (jquery.js:4991)**

	 

	Segue o código: 

 <div class="img-principal">
 <img src="images/produtos/bolo-choco.jpg" alt="" class="img-fluid" id="imagem-principal">
 </div>
 <div class="img-thumb-group">
 <a rel="1">
 <img src="images/produtos/bolo-choco.jpg" class="img-thumbnail config-img-thumb" id="1">
 </a>
 <a rel="2">
 <img src="images/produtos/p-bolo-frutas-vermelhas.jpg" class="img-thumbnail config-img-thumb" id="2">
 </a>
 </div>

<script>
 $(document).ready(function(){
 var img_principal = document.getElementById('imagem-principal');

 $('#1').click(function(){
 img_principal.attr('src',document.getElementById('#1').src);
 });

 $('#2').click(function(){
 img_principal.attr('src',document.getElementById('#2').src);
 });
 });
</script>