[html] How to serve up images in Angular2?

I am trying to put the relative path to one of my images in my assets folder in an image src tag in my Angular2 app. I set a variable in my component to 'fullImagePath' and used that in my template. I have tried many different possible paths, but just cannot seem to get my image up. Is there some special path in Angular2 that is always relative to a static folder like in Django ?

Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = '../../assets/images/therealdealportfoliohero.jpg'
  }

  ngOnInit() {
  }

}

I also put the picture into the same folder as this component, so since the template, and css in the same folder is working I'm not sure why a similar relative path to the image is not working. This is the same component with the image in the same folder.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = './therealdealportfoliohero.jpg'
  }

  ngOnInit() {
  }

}

html

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

app tree * I left out the node modules folder to save space

+-- README.md
+-- angular-cli.json
+-- e2e
¦   +-- app.e2e-spec.ts
¦   +-- app.po.ts
¦   +-- tsconfig.json
+-- karma.conf.js
+-- package.json
+-- protractor.conf.js
+-- src
¦   +-- app
¦   ¦   +-- app.component.css
¦   ¦   +-- app.component.html
¦   ¦   +-- app.component.spec.ts
¦   ¦   +-- app.component.ts
¦   ¦   +-- app.module.ts
¦   ¦   +-- hero
¦   ¦   ¦   +-- hero.component.css
¦   ¦   ¦   +-- hero.component.html
¦   ¦   ¦   +-- hero.component.spec.ts
¦   ¦   ¦   +-- hero.component.ts
¦   ¦   ¦   +-- portheropng.png
¦   ¦   +-- index.ts
¦   ¦   +-- shared
¦   ¦       +-- index.ts
¦   +-- assets
¦   ¦   +-- images
¦   ¦       +-- therealdealportfoliohero.jpg
¦   +-- environments
¦   ¦   +-- environment.dev.ts
¦   ¦   +-- environment.prod.ts
¦   ¦   +-- environment.ts
¦   +-- favicon.ico
¦   +-- index.html
¦   +-- main.ts
¦   +-- polyfills.ts
¦   +-- styles.css
¦   +-- test.ts
¦   +-- tsconfig.json
¦   +-- typings.d.ts
+-- tslint.json

This question is related to html angular image typescript path

The answer is


If you do not like assets folder you can edit .angular-cli.json and add other folders you need.

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

I am using the Asp.Net Core angular template project with an Angular 4 front end and webpack. I had to use '/dist/assets/images/' in front of the image name, and store the image in the assets/images directory in the dist directory. eg:

 <img  class="img-responsive" src="/dist/assets/images/UnitBadge.jpg">

Just put your images in the assets folder refer them in your html pages or ts files with that link.


Add your image path like fullPathname='assets/images/therealdealportfoliohero.jpg' in your constructor. It will work definitely.


In angular only one page is requested from server, that is index.html. And index.html and assets folder are on same directory. while putting image in any component give src value like assets\image.png. This will work fine because browser will make request to server for that image and webpack will be able serve that image.


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to image

Reading images in python Numpy Resize/Rescale Image Convert np.array of type float64 to type uint8 scaling values Extract a page from a pdf as a jpeg How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? Angular 4 img src is not found How to make a movie out of images in python Load local images in React.js How to install "ifconfig" command in my ubuntu docker image? How do I display local image in markdown?

Examples related to typescript

TS1086: An accessor cannot be declared in ambient context Element implicitly has an 'any' type because expression of type 'string' can't be used to index Angular @ViewChild() error: Expected 2 arguments, but got 1 Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Understanding esModuleInterop in tsconfig file How can I solve the error 'TS2532: Object is possibly 'undefined'? Typescript: Type 'string | undefined' is not assignable to type 'string' Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740] Can't perform a React state update on an unmounted component TypeScript and React - children type?

Examples related to path

Get Path from another app (WhatsApp) How to serve up images in Angular2? How to create multiple output paths in Webpack config Setting the correct PATH for Eclipse How to change the Jupyter start-up folder Setting up enviromental variables in Windows 10 to use java and javac How do I edit $PATH (.bash_profile) on OSX? Can't find SDK folder inside Android studio path, and SDK manager not opening Get the directory from a file path in java (android) Graphviz's executables are not found (Python 3.4)