Alterar imagem de plano de fundo clicando no botão (usando jQuery e API) - javascript, jquery, api, background-image

Estou usando uma API que retorna um URL aleatório para umimagem aleatória e defina-a como a imagem de fundo do corpo. Como posso fazer isso mudar após cada clique de um botão? Tenho o código abaixo, mas não funciona.

function changeImage() {

$.getJSON("https://api.unsplash.com/photos/random?client_id=336b527b2e18d045045820b78062b95c825376311326b2a08f9b93eef7efc07b", function(result){

var randomPhoto = result.urls.full;

console.log(randomPhoto);

$("body").css("background-image", "url(randomPhoto)");

});


};

Eu uso um evento de clique do jQuery no botão para chamar a função.

$("#button").on("click", function() {


changeImage();


});

});

A função carrega um novo objeto JSON com imagem todas as vezes, mas a imagem de fundo não muda ...

Respostas:

Como sugerido pelo DynoMyte, você deve fazer o seguinte:

function changeImage() {
var src = "https://api.unsplash.com/photos/random?client_id=336b527b2e18d045045820b78062b95c825376311326b2a08f9b93eef7efc07b";
$.getJSON(src, function(result){
$("body").css("background-image", "url("+ result.urls.full +")");

});
};

Mude isso:

$("body").css("background-image", "url(randomPhoto)");

Para isso:

 $("body").css("background-image", "url("+randomPhoto+")");