ng-src in Angular 2 js with Dart

Question

In angular version 1 i use ng-src to load an url. In angular 2 Js for Dart i can't find a similar method to load resources. For example in Angular 1 js:

 <img class="cover" src="images/cover_placeholder.png" data-ng-src="{{coverUrl}}"

in Angular 2 js i have already tried:

 <img class="cover" src="{{coverUrl}}">

How i can load a placeholder in case of image is not available? There areothers smart ways to do that?

EDIT Solved in this way:

   <img class="class-image" onError="this.src='./images/cover_placeholder.png';" src="{{coverUrl}}" >

If image is not avaible place the Placeholder image.

what do you mean with image not available? is the variable undefined or the image returns a 404 — juvian, Mar 16 '16 at 16:21
Are you using a directive? Don´t see how that case would be resolved with angular 1 — juvian, Mar 16 '16 at 16:28
You would probably need to do something like this but with angular2: http://stackoverflow.com/questions/16349578/angular-directive-for-a-fallback-image — juvian, Mar 16 '16 at 16:45
What's the problem with `src="{{coverUrl}}"`? I haven't found anything about `data-ng-src`. Can you please provide a link? — Günter Zöchbauer, Mar 18 '16 at 11:28

score 3 · Answer 1 · edited Jun 02 '17 at 00:09

3

It will depend on when you are getting the error. If it is erroring on load, it is because Angular hasn't kicked off by the time the html is loaded and so the url cannot be interpreted.

In AngularJS, this was circumvented by using ng-src

The Angular two equivalent is to use [src]=""

<img class="cover" [src]="coverUrl">

edited Jun 02 '17 at 00:09

Graham

7,431
18
59
84

answered Jul 06 '16 at 09:10

Des Horsley

1,858
20
43

Thes two equivalents should be split where one uses `[]` and the other `{{}}` ;-) Both at the same time are invalid. – Günter Zöchbauer Jul 06 '16 at 09:13
1

You are correct, I've updated my answer! Just a copy and paste error from the OP's question. SO needs a compiler! – Des Horsley Jul 06 '16 at 09:20

ng-src in Angular 2 js with Dart

1 Answers1