Cannot use img ng-src (Cannot communicate with ng-src as it is not a known img property)
I have an Angular project with Webpack and I am trying to use img tag using ng-src, for Angular docs here:
https://docs.angularjs.org/api/ng/directive/ngSrc
I am trying to get a variable in the image source like so:
<img ng-src="assets/images/{{row.imagePath}}.png" width="1" height="1" />
However, when I start the ng service, I get the following errors in the browser console:
zone.js:569 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ng-src' since it isn't a known property of 'img'.
I have Googled and found others using ng-src without issue with Angular + Webpack, so I'm not sure why it doesn't work on this project. Thank.
source to share
You can use input [attr.src]
to bind to your own html properties.
In the component.ts file
Let's say you have a list of elements of type ListItem
, the class ListItem
would need to expose a property imagePath
. Thus
export class ListItem {
public imagePath: string;
// ....
}
@Component({
templateUrl: './your/template/example.html',
})
export class YourComponent {
listItems: ListItem[];
//...
}
In your template
<div *ngFor="item in listItems">
<img [attr.src]="item.imagePath" width="1" height="1" />
</div>
Hope this helps!
source to share