Как получить URL изображения из идентификатора в Javascript

Question

Я знаю, что это такая вещь для начинающих. Таким образом, у меня есть это изображение в div с большим пальцем id.

<img id="thumb" src="https://url-to-a-image">

И этот Javascript, который это скрипт увеличения:

<script type="text/javascript">
    var myImgSrc = document.getElementById("thumb").getElementsByTagName("img") 
[0].src;
    var evt = new Event(),
    m = new Magnifier(evt);
    m.attach({
        thumb: '#thumb',
        large: 'myImgSrc',
        largeWrapper: 'preview'
    });
</script>

Как вы можете видеть, я пытаюсь получить изображение, используя myImgSrc, а затем я пытаюсь использовать в целом: "myImgSrc". Когда я помещаю фиксированный URL-адрес в большое: fixed-url-to-image, он работает нормально.

Answer 1

Элемент с #thumb id это тег img Сам по себе текущий селектор не вернет src значение, так что должно быть просто:

var myImgSrc = document.getElementById("thumb").src;

Answer 2

Вы можете получить изображение src как это,

var thumb = document.getElementById("thumb").src;

Вам не нужно использовать getElementsByTagName,

Answer 3

let img = document.querySelector('#thumb');
console.log(img.src);

Если вы используете img.src, вы увидите источник вашего тега img.

Answer 4

getElementsByTagName Это лишнее - у вас уже есть нужный элемент - вы выбрали его по его идентификатору. Вам нужно только getElementsByTagName если вы хотите получить один или несколько элементов по их тегам и поработать с ними всеми, а не точно идентифицировать их.

Так что на самом деле решение очень простое - просто получите src атрибут ID-выбранного элемента напрямую. Рабочая демонстрация:

var myImgSrc = document.getElementById("thumb").src;
console.log(myImgSrc);

<img id="thumb" src="https://url-to-a-image">