GET error in image URL 403 (FORBIDDEN) when trying to change img tag src

Question

I have an input form where I get the link of an image and then a button where it has a function that stores the URL in a variable so that I can dynamically change the image being shown in the img tag in my HTML, my problem is in the fact that, when I insert the image I get the following error:

logo.png%22):1 GET http://localhost/download/url(%22https://s2.logaster.com/Static/v3/img/products/logo.png%22) 403 (Forbidden)

However, when running a console.log at the value passed in the url, I can see that the URL was passed correctly.

Here’s the way I was trying

            function changeImage() {
                var url = document.getElementById("newImage").value;
                document.getElementById('header2-1').src = 'url("' + url + '")';
                var log =  document.getElementById.src = 'url("' + url + '")';
                console.log(log);

            }

        #header2-1 {
            height: 100%;
            width: 100%;
            background: no-repeat;
        }

    <span class="navbar-logo">
        <a href="https://mobirise.com">
            <img id="header2-1" src="https://pt.freelogodesign.org/Content/img/logo-ex-2.png" alt="Mobirise" title="" style="width: 122px; height:98px;">
</a>
</span>

    <input type="text" id="newImage">
    <input type="button" value="Salvar Imagem" onclick="changeImage();">

Even when I try to access an image that is in the same directory, not from the web, I get the same error.

Answer 1

There are some problems with your code. Read the comments below:

var url = document.getElementById("newImage").value;
/// ; Esta linha esta correta, você esta procurando o elemento pelo id 'newImage'  
/// ; (que é um input) e pegando seu `value`. [OK]

document.getElementById('header2-1').src = 'url("' + url + '")';
/// ; Essa linha não esta boa.
/// ; Você esta procurando o elemento com id 'header2-1', e vai alterar sua 'src' [OK]
/// ; Porem, neste momento me parece que você acha que esta alterando alguma
/// ; propriedade do CSS pois esta usando 'url("https://...")'. É isso que esta fazendo
/// ; sua url ficar invalida.
/// ; O 'src' em questão é uma propriedade do HTMLImageElement, 
/// ; logo o correto seria como mostrado abaixo:
document.getElementById('header2-1').src = url;
/// ; Claro, assumindo que url é uma URL valida de imagem.


var log = document.getElementById.src = 'url("' + url + '")';
/// ; Tambem há problemas nesta linha, veja:"
/// ; document.getElementById é uma função nativa, 
/// ; você esta colocando uma propriedade 'src' nela. 

/// ; Talvez o que você queria fazer era: colocar o HTMLElement em uma variavel e
/// ; depois acessar sua propriedade, como neste exemplo abaixo
var minhaImagem = document.getElementById('header2-1');

var log = minhaImagem.src = url; 
/// ; ambos ( log e minhaImagem.src ) vão receber o valor da variavel url;

Your code working:

function changeImage() {
    var url = document.getElementById("newImage").value;
    
    document.getElementById('header2-1').src = url;

    console.log( url );
    
    /// ; Outra possibilidade
    /// ; var url = document.getElementById("newImage").value,
    /// ;     minhaImagem = document.getElementById('header2-1');
    /// ; minhaImagem.src = url;
}

#header2-1 {
    height: 100%;
    width: 100%;
    background: no-repeat;
}

<span class="navbar-logo">
    <a href="https://mobirise.com">
        <img id="header2-1" src="https://pt.freelogodesign.org/Content/img/logo-ex-2.png" alt="Mobirise" title="" style="width: 122px; height:98px;">
    </a>
</span>

<input type="text" id="newImage" value="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<input type="button" value="Salvar Imagem" onclick="changeImage();">

Reference: Htmlimageelement, Document.getElementById()