Image src Always Fetched, Even When Guarded

[jherdman]

I'm upgrading an application from 1.8.1 to 1.10, and I've run into a bit of an ugly problem with template rendering.

The offending code is as follows:

    {{#if hasCoach}}
      {{#link-to "your-coach" class="pn-mainMenu__item grid__item one-whole close"}}
      <div class="grid grid--full">
        <section class="pn-mainMenu__text grid__item nine-tenths push--one-tenth">
          <img {{bind-attr src="coachPhotoUrl"}} class="inline-icon rounded">
          Coach {{coachFirstName}}
        </section>
      </div>
      {{/link-to}}
    {{/if}}

This is found on a menu bar in our application, and these values will change depending on which membership a student has selected.

In the offending scenario we start by visiting a membership where hasCoach is false, ergo the snippet above should not be rendered. Next we switch to a membership that does have a coach (render the snippet), and then back to the membership without a coach. At this point the following error is in the JavaScript console:

GET http://localhost:4444/undefined 404 (Not Found)

I can verify that it's the above snippet causing the problem by commenting out the image, at which point the error doesn't occur.

I've attempted 1.11.0-beta5 and the same issue is in play.

I haven't a JSBin to replicate this yet, but I will attempt to do so soon. I'm available to ScreenHero if anyone is interested in trying to tackle this.

[quaertym]

I have the same problem. I had talked @rwjblue about this on irc. He said it was fixed in latest builds of 1.10 but I continue to see it.

[jherdman]

Do you have a JSBin replicating the issue? It'd certainly save me some time trying to replicate the problem :)

[quaertym]

Unfortunately not, I only have an ugly hack which is to wrap img tags with if blocks.

[jherdman]

One more question: did you already have an issue open? I can nuke this issue if you do.

[quaertym]

Nope, this is the only issue.

[rwjblue]

Should have been fixed by #10398.

[quaertym]

@rwjblue Any plans to release v1.10.1?

[jherdman]

Awesome! I'll be sure to test it out.

[wagenet]

@quaertym unlikely, 1.11 should be out any day now.

[dgeb]

@rwjblue I have a failing test indicating that #10398 doesn't solve this. Working on a fix now.

[rwjblue]

@dgeb - Sounds good. Will keep an eye out...

[jherdman]

This bug appears to be back in 1.11.3

[jherdman]

Offending code looks like this:

    {{#if hasCoach}}
      {{#link-to "your-coach" class="pn-mainMenu__item grid__item one-whole close"}}
      <div class="grid grid--full">
        <section class="pn-mainMenu__text grid__item nine-tenths push--one-tenth">
          <img src={{coachPhotoUrl}} class="inline-icon rounded">
          Coach {{coachFirstName}}
        </section>
      </div>
      {{/link-to}}
    {{/if}}

Even if I do the following, the problem still crops up:

    {{#if hasCoach}}
      {{#link-to "your-coach" class="pn-mainMenu__item grid__item one-whole close"}}
      <div class="grid grid--full">
        <section class="pn-mainMenu__text grid__item nine-tenths push--one-tenth">
          {{#if coachPhotoUrl}}<img src={{coachPhotoUrl}} class="inline-icon rounded">{{/if}}
          Coach {{coachFirstName}}
        </section>
      </div>
      {{/link-to}}
    {{/if}}

The only work around is to use the old {{bind-attr}} syntax to bind the src attribute.

[rwjblue]

Reopening to review, but I think the following hack should work in the interim:

<img src={{if coachPhotoUrl coachPhotoUrl ""}} class="inline-icon rounded">

[jherdman]

I'll give that a try. I think, in general, the guide on bound attributes may need some TLC. If a work around is suitable here, I'll open a pull request documenting it in the guides repo.

[jherdman]

FYI I finally got around to trying the workaround, and it didn't work.

[stefanpenner]

Glimmer should have fixed this