Using AngularJS, How Can I Choose Not to Render a HTML Element if a Variable is Not Defined?

I'm trying to resolve an issue whereby a HTML element uses a Javascript variable to define the image it should display, but errors on load. Have a look at this line:

<img src="../../Images/{{variableData.data.canEdit}}.png" />

This currently works great, except under the browser's console, it is displaying an error to say that it cannot find the literal string "{{variableData.data.canEdit}}.png". I assume this is because AngularJS is loaded after the HTML elements are rendered by the browser.

How can I work around this?

I did try using the following Angular statement on the element like so:

ng-if="typeof(variableData.data)!=='undefined'"

But I imagine this makes no difference and the browser will still display a not found error message for the .png image.

The page all functions correctly, I just don't want those error messages in the browser's console.

Any ideas?

Many thanks