Получить первый источник элемента изображения

Question

Я пытаюсь получить первый src элемента img в giphy-ссылках, подобных этой: https://media.giphy.com/media/4uZv6yO0loMKc/giphy.gif

Я использую этот код jquery:

$('img').attr('src');

, но он получаетвторая ссылка на источник, которая заканчивается на .gif, а не та, которая заканчивается на .webp.

Как я могу получить конкретную ссылку img src, ту, которая заканчивается на .webp?

Answer 1

Выполнение этого кода в console при открытой странице дает мне правильное изображение.

document.querySelectorAll('img')[0].src

, так что этот код работает также

document.querySelector('img').src

Answer 2

В javascript: var attribute = document.getElementsByTagName('img')[0].attributes.src.value;

Ваша проблема не в том, чтобы выбрать другие атрибуты.Атрибут src - это объект, который имеет разные свойства.Выбор свойства «value» вернет ссылку, оканчивающуюся на .webp, поскольку ваша цель.

Answer 3

Вы можете использовать [src$='gif'], как в $("img[src$='gif']:first").attr("src")

[src$='gif'] выберет один или несколько элементов, где src заканчивается gif

Этотакже безопаснее, так что вам не нужно беспокоиться о том, в каком порядке ваши изображения

демо

console.log($("img[src$='gif']:first").attr("src"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://media.giphy.com/media/4uZv6yO0loMKc/giphy.gif" />