How to Serve Up Images in Angular2

How to serve up images in Angular2?

Angular only points to src/assets folder, nothing else is public to access via url so you should use full path

 this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg'

Or

 this.fullImagePath = 'assets/images/therealdealportfoliohero.jpg'

This will only work if the base href tag is set with /

You can also add other folders for data in angular/cli.
All you need to modify is angular-cli.json

"assets": [
 "assets",
 "img",
 "favicon.ico",
 ".htaccess"
]

Note in edit :
Dist command will try to find all attachments from assets so it is also important to keep the images and any files you want to access via url inside assets, like mock json data files should also be in assets.

Cannot serve images from express server to angular 2

You need to provide a base URL that the angular app would hit in order to fetch static content or hit APIs.

Hence, you might do something like below in your service and provide that in your component's .ts file or if you wish you may as well declare the baseUrl inside environment.ts file:-

const baseUrl = http://localhost:8080;

and then in your component's HTML:-

<img src="{{baseUrl}}/images/pic.png">

---

The problem that you face is due to img src="/images/pic.png". It will hit the domain from where the angular app is served. Hence, if you are developing the app, then it will result in img src="http://localhost:4200/images/pic.png" generally.

However, if you serve the app from the same domain where your images are hosted, i.e. if you might have used a reverse proxy, then it is possible to fetch it the way you are trying. But that would require you to configure additional servers.

Can't serve images in angular 2 applications

I finally found what was causing my problem. It was hard to find but the angular project was in a folder whose name contained "[]" characters. That seemed to be the problem. I don't know why though....?

How to load images in angular2

Yes I got it


<img id="logo" [src]="fullImagePath + '/logo.png'" alt="Simpla Admin logo" />


and I don't have to declare as an array.
just

this.fullImagePath = '/assets/imges';

How to load image (and other assets) in Angular an project?

I fixed it. My actual image file name had spaces in it, and for whatever reason Angular did not like that. When I removed the spaces from my file name, assets/images/myimage.png worked.

Images not loading in Angular 2

If you are using angular-cli then all your static assets should be kept in assets folder. Then you should give path as

 <div>
      <img  src="assets/images/New-Google-Logo.png"/>
 </div>

When you serve the project all static assets needs to be served to client in order to display it on client. Angular cli build and bundle entire project in js files. To serve your static assets you can follow two ways

• put all your static assets in assets folder which angular-cli serves with default .angular-cli.json

• or you need to make entry of the static assets folder in .angular-cli.json file in array named as assets as my images folder is in static folder and static folder is at same hierarchy level of assets folder

  "assets": [ "assets", "static/images" ]
  

Angular2 - Display image

The way you try it, you don't get the image URL with fileInput.target.files[0], but an object.

To get an image URL, you can use FileReader (documentation here)

onFileChange(fileInput: any){
    this.logo = fileInput.target.files[0];

    let reader = new FileReader();

    reader.onload = (e: any) => {
        this.logo = e.target.result;
    }

    reader.readAsDataURL(fileInput.target.files[0]);
}

Angular 2+ How to get dynamically added images after angular build

You have to configure your server in order to serve the right image when required. The problem is not about Angular.

If you are using express, you can add the following rule before serving the webapp:

app.use(express.static('server/public/images'));

Fix the above code with your relative path.

In this way, when your web server will receive a request, he will firsty see if it's an image contained in your folder, otherwise it will serve Angular.

---

Note

In this way, if you try accessing a not existent image, you will receive a text/HTML result with your webpage as content and 200 as status code.

You may need checking the extension of the file, if it is jpg, jpeg, png or gif you search in the folder, if the image exists you send it as response and if it doesn't exist you send 404 status code.

If the extension is not one of the above, then you serve the webapp in any case.

app.use(express.static('server/public/images'));
app.get(/\.(jpg|jpeg|png|gif)$/, function(req, res) {
  res.status(404).send('Not found');
});

---

Related Topics