206

I'm pretty new to Angular so I'm not sure the best practice to do this.

I used angular-cli and ng new some-project to generate a new app.

In it created an "images" folder in the "assets" folder, so now my images folder is src/assets/images

In app.component.html (which is the root of my application), I put 

<img class="img-responsive" src="assets/images/myimage.png">

When I do ng serve to view my web application, the image does not display.

What is the best practice to load up images in an Angular application?

EDIT: See answer below. My actual image name was using spaces, which Angular did not like. When I removed the spaces in the file name, the image displayed correctly.

Liam
  • 27,717
  • 28
  • 128
  • 190
user3183717
  • 4,427
  • 6
  • 20
  • 42
  • 2
    yes you are right , you gave correct path syntax from assets fodler, might be problem with your name mismatch, check if image is present or not – Pardeep Jain Mar 14 '17 at 18:06
  • 1
    Definitely not a name mismatch, I ended up creating a `public` folder outside of `src` and displaying the image with `` – user3183717 Mar 14 '17 at 18:13
  • 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. – user3183717 Mar 14 '17 at 18:15
  • 1
    good :) btw no need to create extra public folder in Updated cli they already have same named asstes. – Pardeep Jain Mar 14 '17 at 18:16
  • I have a similar problem with files with other extensions (e.g. `.sgf`) I want to host those files and link to them from the application, but apparently simply putting them in the `assets` folder isn't enough. Any ideas ? – bvdb Aug 08 '17 at 08:02

11 Answers11

161

In my project I am using the following syntax in my app.component.html:

<img src="/assets/img/1.jpg" alt="image">

or

<img src='http://mruanova.com/img/1.jpg' alt='image'>

use [src] as a template expression when you are binding a property using interpolation:

<img [src]="imagePath" />

is the same as:

<img src={{imagePath}} />

Source: how to bind img src in angular 2 in ngFor?

mruanova
  • 6,351
  • 6
  • 37
  • 55
  • 1
    is your app.component.html and assets folder in the same level? – Halil Aug 28 '17 at 07:48
  • 1
    No, the folder structure is created automatically and you should have the same folders than me: project-folder\src\assests\ and project-folder\app\app.component.html if this helps please upvote. – mruanova Aug 28 '17 at 13:01
108

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.

user3183717
  • 4,427
  • 6
  • 20
  • 42
  • I had a special character '^' in the filename and had the same problem,after renaming it worked, so i believe that angular doesn't like special characters and spaces in the filenames – pandy giankoulidis Jul 16 '22 at 11:27
42

Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes. For example :

  • 'my-image-name.png' should be 'myImageName.png'
  • 'my image name.png' should be 'myImageName.png'

If you put the image in the assets/img folder, then this line of code should work in your templates :

<img alt="My image name" src="./assets/img/myImageName.png">

If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.

jmuhire
  • 2,091
  • 21
  • 19
22

Being specific to Angular2 to 5, we can bind image path using property binding as below. Image path is enclosed by the single quotation marks.

Sample example

<img [src]="'assets/img/klogo.png'" alt="image">

Bhuwan Maharjan
  • 515
  • 4
  • 7
  • 1
    what's the difference between src="assets/img/klogo.png" and [src]="'assets/img/klogo.png'"? – gdbj Dec 28 '17 at 19:40
  • 1
    @gdbj here is the answer https://stackoverflow.com/questions/41426974/whats-better-to-use-in-angular-src-or-src – mohit uprim Jan 20 '18 at 11:31
  • 1
    so basically, we use [src] to bind to the model if we want to be able to change the src using that method. – gdbj Jan 21 '18 at 20:15
  • Thanks mohit for answering the thread. @gdbj I hope you had your confusions sorted by now. – Bhuwan Maharjan Jan 22 '18 at 01:47
  • 1
    Would just like to point out for future readers to look for the inner single quotes in the first comment here by gdbj. They're harder to see in the comment font than they are in the answer above, but missing them could lead to some confusion. (May depend on your browser, not sure.) – SilithCrowe Aug 28 '18 at 16:37
10

Normally "app" is the root of your application -- have you tried app/path/to/assets/img.png?

chrispy
  • 3,552
  • 1
  • 11
  • 19
  • angular-cli put `app` and `assets` folders separately under the `src` folder. (sorry I'm not sure how I'm supposed to format folder structure and names) – user3183717 Mar 14 '17 at 18:02
9

1 . Add this line on top in component.

declare var require: any

2 . add this line in your component class.

imgname= require("../images/imgname.png");

  1. add this 'imgname' in img src tag on html page.

    <img src={{imgname}} alt="">

Bheem Singh
  • 607
  • 7
  • 13
  • this is better for file hierarchy tree's that aren't flat. – chris_r May 10 '19 at 20:43
  • 1
    It also solves issue of caching by generating hash for the image. This works perfectly in Angular 8 But in angular 9 we need to access default property. `imgname= require("../images/imgname.png").default;` this is the hacky way. Do you know any another solution for importing images ? which should not be change after version upgrade. – Saurabh Gangamwar May 02 '21 at 10:32
6

You can follow the below steps in Angular 8+

Step 1: load the image as below in component

const logo = require('../assets/logo.svg').default as string;

@Component({
    selector: 'app-show-image',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class ShowImageComponent implements OnInit {

  logo = logo;
  constructor() { }
  ngOnInit() { }

}

step 2: Add the logic in html file

<img [src]="logo" [alt]="'logo'">

If launched without further configuration, you will see a strange error:

ERROR in src/app/app.component.ts(4,14): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

Do as suggested – add the @types/node typings to your project by running npm install @types/node and edit tsconfig.app.json to set:

"compilerOptions": {
    "types": ["node"],
    ...
}

For more info resource

Anand Raja
  • 2,676
  • 1
  • 30
  • 35
  • using import didn't work for me: import logoSvg from '../../assets/shared/logo.svg'; it cannot find the type and it's declaration – Royer Adames Nov 18 '21 at 16:45
  • 1
    Got this Error when doing import the image like it said above: src/app/header/header.component.ts:2:14 - error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig. 2 const logo = require('../assets/logo.svg').default as string; – Royer Adames Nov 18 '21 at 16:49
  • You've to `install @types/node` and edit tsconfig.app.json as below "compilerOptions": { "types": ["node"], ... } – Anand Raja Nov 21 '21 at 08:47
3

for me "I" was capital in "Images". which also angular-cli didn't like. so it is also case sensitive.

Some web servers like IIS don't have problem with that, if angular application is hosted in IIS, case sensitive is not a problem.

Anonymous Creator
  • 2,968
  • 7
  • 31
  • 77
3

It is always dependent on where is your html file that refers to the path of the static resource (in this case the image).

Example A:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

As you can see, yourpage.html is one folder away from the root (src folder), for this reason it needs one amount of ../ to go back to the root then you can walk to the image from root:

<img class="img-responsive" src="../assests/images/myimage.png">

Example B:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

Here you have to go u in the tree by 2 folders:

<img class="img-responsive" src="../../assests/images/myimage.png">
sznczy
  • 51
  • 3
  • By default, Angular puts the src folder at the base level with the app and assets folders directly inside where app is supposed to be reserved for the actual application (all html, ts, css files). I'm curious as to why you would be putting modules outside of the src folder much less outside of the application. I feel like this goes against all conventions for file structures. – sstoxen Feb 08 '21 at 07:26
1

when you copy the path the src copied also so your path to be start with src/assets/img... , but you need the path begin without src/ so delete that

amara ali
  • 11
  • 1
0

Try not give space while loading the images.

Instead of

<img src='assets/img/myimage.png' alt="">

try with string interpolation or Property Binding to load the source image as best practice.

Raxsi
  • 31
  • 3