使用 javascript 获取 img src

Question

Pardon my ignorance but can the getHref function be applied to returning an img src?

I'd like to get the url for the image below

<div class="uk-width-medium-3-10 uk-text-center">
  <img src="/images/saleitems/Toaster.svg" class="uk-border-circle" alt="great toaster">
</div>

I have this working for a breadcrumb URL...

function getHref() {
  return document.querySelectorAll('.uk-breadcrumb li a')[1].href;
}

My sad attempt at adjusting the above ( which didn't work)

function getHref() {
  return document.querySelectorAll('.uk-border-circle li a')[0].href;
}

It should return

https://www.example.com/images/saleitems/Toaster.svg

Any help or suggestions here would be appreciated

Answer 1

I think your selector isn't correct, you are targeting an a element when you actually want to target the img element, additionally, if you expect a single element to be selected, you can use querySelector instead of querySelectorAll .

Another thing is what you're looking for is the img 's src attribute.
An href attribute is what you would look for if your element was indeed an a tag

// returns https://www.example.com/images/saleitems/Toaster.svg
document.querySelector('.uk-border-circle').src

Answer 2

It should work:

function getHref() {
      return document.querySelectorAll('.uk-breadcrumb')[1].src;
 }