Reseting a ng-src value

[escalant3]

When setting a ng-src to '' to clean its value does not work in Chrome. It does work in Firefox. Here is the jsfiddle:

http://jsfiddle.net/escalant3/3B5ej/

[latentflip]

I am not sure that this is really an angular bug.

The latest versions of chrome and firefox both seem to behave the same in this regard (the image doesn't change when it's src is set to '' or undefined. Indeed, the W3C spec states:

The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#attr-img-src

So the fact that setting ng-src to '' gives odd/differing behaviour in different browsers isn't really a bug in angular.

@escala if you agree can you close this issue please? Trying to do a clear out 😄

[readyToClose]

[kkartch]

I'm seeing this issue also. I think this is a valid bug. There are always quirks and differences between browsers. How many exceptions and workarounds are there in Angular to support IE? If there is a possible work around in Chrome to make this function as expected, then maybe it could be considered for a fix.

[petebacondarwin]

@kkartch - what do you suggest as a fix?

[kkartch]

I am actually seeing something different from escalant3 because I'm seeing this in Firefox also, so maybe it isn't a Chrome specific bug. The reason it isn't clearing the image in the directive is because of the following if statement in the $observe callback:

          if (!value)
             return;

          attr.$set(attrName, value);

It returns before the attr.$set, so the empty string value never gets set on the src attribute. I'm sure that if statement is there for a reason, so I'm not sure what would be broken if that was taken out. !value can evaluate to true for quite a few reasons, and maybe empty string was not intended to evaluate true in this case?

This might not be the best fix, but I think this would work:

          if (!value && value !== "")
             return;

          attr.$set(attrName, value);

[pkozlowski-opensource]

@kkartch the check for empty src attributes was added in b6e4a71 to prevent problems with empty src attributes. And there are plenty of possible problems, check the mentioned commit comment plus this article: http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

Not to mention that HTML5 specification states:

src = non-empty URL potentially surrounded by spaces

http://dev.w3.org/html5/markup/img.html

"Support" for empty src attributes can be harmful and this is browser-implementation dependent.

[kkartch]

Understood. Thanks for the feedback. ng-hide should be used for this use
case.

On Thu, Jul 11, 2013 at 11:25 AM, Pawel Kozlowski
notifications@github.comwrote:

@kkartch https://github.com/kkartch the check for empty src attributes
was added in b6e4a71b6e4a71166c7f00f4140fd7ea8f0cd81b4487a3fto prevent problems with empty
src attributes. And there are plenty of possible problems, check the
mentioned commit comment plus this article:
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/

Not to mention that HTML5 specification states:

src = non-empty URL potentially surrounded by spaces

http://dev.w3.org/html5/markup/img.html

"Support" for empty src attributes can be harmful and this is
browser-implementation dependent.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1218#issuecomment-20827568
.

[vasiapupkin01]

i fix it by set value = " ";
with whitespace.
and it's work.

[nicolae-olariu]

@jSemyonom Worked great! Thanks for the tip!

[cjz9032]

w3c: A URL that is not the empty string, optionally with leading and/or trailing space characters.

[muellersergej]

I've just encountered the same issue. And if I figured this right, the specs define that the src attribute on the img tag is optional. Hence, when ng-src evaluates to null or any other invalid path (empty for instance) I think the src attribute shouldn't be removed from the img tag completely.