NgSrc
Small Angular directive that loads images using XHR and exposes the request.
Usefull for cases when we need to get additional information like headers set by the server.
The image is requested from the server as arraybuffer and a blob is created from the response. A local url is created with createObjectURL and this is set as src for the image tag.
Installing
Use npm or yarn to install
npm install ng-src --save
or
yarn add ng-src --prod
Using
Import NgSrcModule and add it to the imports array of your app module
import { NgSrcModule } from 'ng-src';
@NgModule({
imports: [
NgSrcModule,
],
})
export class AppModule { }
You now can use the ngSrc directive on image tags inside your application
<img [ngSrc]="'http://localhost:4200/demo/assets/cat300.jpg'"
(ngOnLoad)="exampleCallback($event)">
The directive exposes ngOnLoad event that is triggered when the image is loaded and gets as argument the XMLHttpRequest object. One can use this to get any additional information required like the headers
exampleCallback(request: XMLHttpRequest) {
console.log(request.getAllResponseHeaders());
}
Contributing
Clone this repository
git clone https://github.com/adrianfaciu/ngsrc
And install all dependencies
yarn install
or
npm install
Source code is inside src/ng-src and a demo application is found inside src/demo.
Scripts
build:lib
- build and bundle the lib package using ng-packarserve:demo
- serve the demo applicationtest
- execute the testse2e
- execute end to end testslint
- run the linter on the source code
All these scripts can be used with npm run scriptName
or yarn scriptName
.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
- Adrian Faciu - Initial work
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE file for details.