When Javascript takes src from an image returns absolute path

Question

When Javascript takes src from an image returns absolute path

Navigation

#1 by (1 votes)

0

I have the following HTML5 (only relevant):

<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>

With the following 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);

});}

It turns out that when JavaScript creates the image, the image comes with the src value as an absolute path, something I do not want to happen:

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

obs: I'm opening this site from a html file of my machine in the browser, FF 47.0.

When / Why does this occur? How to solve?

javascript html5

asked by anonymous 16.06.2016 / 03:25

1 answer

How to get the date of creation of a file that is on an FTP server c # Vector ordering of character vectors with qsort stdlib.h

score 1 · Answer 1

This does not occur, it is native. Indexing src will not return the attribute of the image. But if you get the attribute src of the image, it will return what you typed in the src attribute - JavaScript does not modify the attributes (except style ).

this.getAttribute('src')

The solution in your code would be to modify the HTML line

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

for

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

... But try not to use online code in HTML.