0

Tenho o seguinte HTML5 (apenas relevante):

<html>
<head>
    <meta charset="UTF-8"/>
    <title>Test</title>
</head>

<body>
<div id="layout">
        <main>
            <section>
                 <ul>
                    <li><img src="Imagens/Foto1.jpg" alt="" onclick="abrirFoto(this.src);"></li>
                </ul>
            </section>
        </main>
    </div>
        <div id="overlay">
            <div id="imgdiv"></div>
        </div>
</body>

Com o seguinte JavaScript :

function abrirFoto(src) {
var divOpen = document.getElementById('overlay');

var openImg = document.createElement('IMG');
openImg.id = "open";
openImg.setAttribute('src',src);

imgDiv = document.getElementById('imgdiv');
divOpen.style.display = "block";
imgDiv.appendChild(openImg);

});}

Acontece que quando o JavaScript cria a imagem,a imagem vem com o valor do src como um caminho absoluto,algo que não quero que ocorra:

<div id="imgdiv">
    <img id="open" src="file:///C:/Users/GustavoR/Desktop/HTML5/14.06%20N-Vermelho%20v2/Imagens/Foto3.jpg">
</div>

obs:estou abrindo esse site de um arquivo html da minha maquina no browser,FF 47.0 .

Quando/Por que isso ocorre? Como resolver?

1 Resposta 1

1

Isso não ocorre, é nativo. Indexar src não vai retornar o atributo da imagem. Mas se você pegar o atributo src da imagem, vai retornar o que você digitou no atributo src – o JavaScript não modifica os atributos (exceto style).

this.getAttribute('src')

A solução no seu código seria modificar a linha HTML

<li><img src="Imagens/Foto1.jpg" alt="" onclick="abrirFoto(this.src);"></li>

para

<li><img src="Imagens/Foto1.jpg" alt="" onclick="abrirFoto(this.getAttribute('src'));"></li>

... Porém tente não usar código em linha no HTML.

0

Você deve fazer log-in para responder a esta pergunta.