Angular: Can't bind to 'original' since it isn't a known native property

Created on 16 Feb 2016  ·  3Comments  ·  Source: angular/angular

Hi everyone:
I want to add jquery_lazyload in my project

dependencies:
"angular2": "2.0.0-beta.3",
"jquery-lazyload": "1.9.7"

html code:

<div *ngFor="#page of pages">
   <img class="lazy" data-original="http://i-digi-sign.appspot.com{{page}}.jpg" width="595" height="842">
</div>

but it throw exception:

Error: Template parse errors:
Can't bind to 'original' since it isn't a known native property (""595" height="842" style="margin-top: 10px;">-->

                                <img class="lazy" [ERROR ->]data-original="http://i-digi-sign.appspot.com{{page}}.jpg" width="595" height="842" style="margin-top"): TemplateEditComponent@76:50
    at new BaseException (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2.dev.js:7325:21)
    at TemplateParser.parse (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2.dev.js:23440:15)
    at http://127.0.0.1:8888/node_modules/angular2/bundles/angular2.dev.js:24136:54
    at Zone.run (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:1243:24)
    at Zone.run (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2.dev.js:13408:32)
    at zoneBoundFn (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:1220:26)
    at lib$es6$promise$$internal$$tryCatch (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:468:17)
    at lib$es6$promise$$internal$$invokeCallback (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:480:18)
    at lib$es6$promise$$internal$$publish (http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:451:12)
    at http://127.0.0.1:8888/node_modules/angular2/bundles/angular2-polyfills.js:123:10

If I remove "{{page}}" from img.data-original, the code will work well.

How can I deal with it? please help me.

Most helpful comment

<img [attr.data-original]="expr">

See: https://github.com/angular/angular/issues/4438

All 3 comments

<img [attr.data-original]="expr">

See: https://github.com/angular/angular/issues/4438

Thanks, it works well.

<img class="lazy" attr.data-original="http://i-digi-sign.appspot.com{{page}}.jpg" width="595" height="842">
...

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings