Why does .prop('src') return wrong value when property src is null or empty?

Question

$('img').click(function () {
  alert($(this).prop('src'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<img src="http://www.w3schools.com/tags/smiley.gif" />
<img src="" style="width: 10px; height: 10px; border: 1px solid;">

When I click the second image, it alerts http://stacksnippets.net/js.

Why?

Why did you remove my edit? I provided you with a working jsfiddle and made the invisible and unclickable image visible and clickable. — Linus Oleander, Nov 19 '15 at 17:18
@Oleander Because I don't want everyone must redirect to another page to check my example. It's already on the page. — , Nov 19 '15 at 17:20
Everyone here at SO is using jsfiddle to provide running examples. Your current code also doesn't work here. Click on the image and try it your self, no alert message is given. — Linus Oleander, Nov 19 '15 at 17:22
@Oleander Are you sure? Have you tried it? Just clicking and it alerts `http://fiddle.jshell.net/g9d8e4wh/show/` — , Nov 19 '15 at 17:30
@Oleander that's because the Stack Snippets feature doesn't allow `alert`; otherwise, the code runs fine. Still worth noting to the OP, of course. — apsillers, Nov 19 '15 at 17:44
@Mr.Wolf I've only tried pressing the "run" button here on SO, and that doesn't work. — Linus Oleander, Nov 19 '15 at 17:50
@Oleander All of answers say: Don't use `.prop()` for `src`. — , Nov 19 '15 at 18:14

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

According to the official doc :

HTMLImageElement.src Is a DOMString that reflects the src HTML attribute, containing the full URL of the image including base URI.

which obviously means that, without any path given into src, the src attribute will only be equal to the base URI

link : https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement

a quick javascript workaround would be to set src to null if it's value is empty

var src = $(this).prop('src') || null;

jsfiddle : http://jsfiddle.net/g9d8e4wh/1/

concerning your .attr() vs .prop() concern, I suggest you to head on there .prop() vs .attr()

edited May 23 '17 at 11:46

Community

1
1

answered Nov 19 '15 at 17:22

Enjoyted

1,131
6
15

2

`$(this).attr('src') || null` is shorter. – Oriol Nov 19 '15 at 17:36
Sorry, but I don't mention about `.attr('src')`. You can edit your demo, replace `attr` by `prop`. It will alert `http://fiddle.jshell.net/_display/` – Nov 19 '15 at 17:37
So, why `attr`, why `prop`? I wanna use `.prop` because it's faster than `.attr()` – Nov 19 '15 at 17:38
@Mr.Wolf edited answer based on your comment (@)Oriol idd – Enjoyted Nov 20 '15 at 08:53
Thanks for your enthusiasm :) – Nov 20 '15 at 09:05

score 1 · Answer 2 · answered Nov 19 '15 at 17:15

1

When SRC is empty, $(this) retuns the IMG object and src returns the objects context and baseURI. You can see it by viewing the object properties in the console:

$('img').click(function () {
    alert($(this).prop('src'))
    console.log($(this));
})

answered Nov 19 '15 at 17:15

Adam Konieska

2,805
3
14
27

Oriol · Answer 3 · 2015-11-19T17:51:18.147

1

That's because src is reflected:

The alt, src IDL attributes must reflect the respective content attributes of the same name.

And when getting a reflecting IDL attribute which has an URL value, you get the absolute one:

If a reflecting IDL attribute is a DOMString attribute whose content attribute is defined to contain a URL, then on getting, the IDL attribute must resolve the value of the content attribute relative to the element and return the resulting absolute URL if that was successful, or the empty string otherwise

If you don't want this behavior, you can use getAttribute to get the content attribute instead of the IDL one.

edited Nov 19 '15 at 17:51

answered Nov 19 '15 at 17:44

Oriol

274,082
63
437
513

Small question: Why is `src` called `attribute` in your first quote? I think it's `src` property – Nov 19 '15 at 17:54
1

@Mr.Wolf [IDL attributes](http://www.w3.org/TR/WebIDL/#idl-attributes) are also commonly called [properties](http://www.ecma-international.org/ecma-262/5.1/#sec-4.3.26). The official names are different because one is defined by Web IDL and the other by ECMAScript. – Oriol Nov 19 '15 at 17:57
Sorry for many questions, but all of your links don't mention about how to use `.prop()` to check a `src` is null or not. Like this: `if ($('img').prop('src') == null || $('img').prop('src') == '') {}` – Nov 19 '15 at 18:09
1

jQuery's `prop` returns the IDL attribute (property). jQuery's `attr` returns the content attribute. The former will be the resolved absolute URL, the latter the value you used in the HTML code. – Oriol Nov 20 '15 at 09:17

score 0 · Answer 4 · answered Nov 19 '15 at 17:41

There is a synchronization between properties and attributes but not for all cases. For example 'href' and 'src' are not synchronized. In your case you need to use

$('img').click(function () {
  alert($(this).attr('src'))
})

or getAttribute() when using vanilla JS. You can learn more here - > http://javascript.info/tutorial/attributes-and-custom-properties

Why does .prop('src') return wrong value when property src is null or empty?

4 Answers4