Loading Images from External Folder to Component Angular 2

Loading Images from external folder to component Angular 2

Use a css style to apply it to a div.

.logo {
    width: logowidthpx;
    height: logoheightpx;
    background-image: url('assets/img/logo.png');
}

and in your component

<div class="logo"></div>

Angular2 load image

If you are using angular-cli to build your project.

You need to include your img directory in the list of assets that needs to be copied to the output (deployable) directory.

In the .angular-cli.json file, add the img directory to the below array:

apps[0].assets

And then you can use like below

<img src="img/image.jpg">

It would be something like

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "img"
  ],

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.

Accessing image outside the src folder in angular

You could use glob to do this.

Refer angular documentation: assets-configuration

Something like this can be done: Update your glob & input/output path as per your structure. Below is the sample code for reference

"assets": [
 {
   "glob": "**/*",
   "input": "./img",
   "output": "/some-package/" <- this is relative to outputDir
 }
]

Can't display static image in the same folder as the component in Angular

You need to put the image in assets folder and then reference it in your html like this

<img src="assets/img/logo.png">

You need to do this, as the cli compiles and bundles your application it also bundles your assets too and path to image may change during bundling process.

See this link for an example

Angular 5: How do I access image files outside the app or assets folder?

You should not (in this case) consider those as a part of your app. Consider those media files as things that come from backend, instead.

The uploaded files are completely separated form your Angular app. Your "server" folder will likely have something like that (or better, move it completely outside of the sources). Your server needs to, on upload, put the files somewhere publically accessible, or provide an endpoint where it will serve those files. And whatever this backend server gives you is gonna be where you fetch it from.

Relative Image URL

If you want to serve files outside of web root,you need to add the following configuration in StartUp.cs:

app.UseStaticFiles();
    
   ...
   app.UseStaticFiles(new StaticFileOptions
   {
        FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "Resources")),
        RequestPath = "/Resources"
   });

Angular 2 img src in a relative path

I am using webpack and have been able to overcome this issue by requireing the image in the component as a variable and using this in my template.

This is because during the bundling phase webpack will load the resource and store the correct URL and calling require at runtime will get this correct URL to pass to the template.

---

Example

Using the following directory structure

app/
    header/
        header.component.ts
        header.component.html
        assets/
            logo.png
...

header.component.ts

...
@Component({
    selector: 'header',
    templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
    private LOGO = require("./assets/logo.png");

    constructor() {};
}

header.component.html

<div>
    <img [src]="LOGO" />
</div>

---

Admittedly this binds the component and template but the require needs to be in the component so that webpack is able to analyse and load it when bundling.

---

With this approach I have packaged my module using npm and installed and used it in another project - which also uses webpack.

I am yet to test with SystemJS.

---

Related Topics