user3183717
user3183717

Reputation: 4667

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

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/my image.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.

Upvotes: 218

Views: 690178

Answers (14)

nicolasQuack
nicolasQuack

Reputation: 1

Go to angular.json and change inputs in the assets option... I changed it from "public" to src/assets, so now all the images, fonts, ... that I put inside this, I will import as: images/logo.png

my folders is like this:

src
|- assets
   |- images
      |- logo.png

this works for me, I hope it helps

Upvotes: 0

Mahnoor Malik
Mahnoor Malik

Reputation: 61

In angular.json
change
    "assets": [
      {
       "glob": "**/*",
       "input": "public",
      }
 to:   
    
    "assets": [
      {
        "glob": "**/*",
        "input": "public",
        "output": "/"
      },
      {
        "glob": "**/*",
        "input": "src/assets",
        "output": "/assets"
      }
    ]

Upvotes: 6

Floyd Money May
Floyd Money May

Reputation: 1

I know this is an old question, but incase someone comes around it again, a method i found to work is the following.

Place 'Assets' & 'Vendor' and any other folders/files you would like to access from your Angular app.

in Angular.json ensure that you have

"assets": [
          {
            "glob": "**/*",
            "input": "public"
            
          }
        ],

And finally access your resources/files like

"..img src="/assets/images/featured-01.png" alt="" style="max-width: 44px;.."

in your components, they show as they should.

If there is anything wrong with my response, please correct me politely, do not bash me. I am learning as well.

Upvotes: 0

amara ali
amara ali

Reputation: 11

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

Upvotes: 1

Anand Raja
Anand Raja

Reputation: 3106

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

Upvotes: 6

Raxsi
Raxsi

Reputation: 31

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.

Upvotes: 0

Anonymous Creator
Anonymous Creator

Reputation: 3819

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.

Upvotes: 3

mruanova
mruanova

Reputation: 7115

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?

Upvotes: 176

sznczy
sznczy

Reputation: 71

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">

Upvotes: 5

jmuhire
jmuhire

Reputation: 2221

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.

Upvotes: 44

Bheem  Singh
Bheem Singh

Reputation: 707

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="">

Upvotes: 9

Bhuwan Maharjan
Bhuwan Maharjan

Reputation: 573

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">

Upvotes: 22

user3183717
user3183717

Reputation: 4667

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.

Upvotes: 113

chrispy
chrispy

Reputation: 3612

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

Upvotes: 10

Related Questions