CODEWITHSUNDEEP
angularangular-cli
Prava
Prava

Reputation: 33

How to load image from src/images folder rather than from assets folder in angular 2

I'm new to Angular 2. I'm generating angular 2 project by angular cli. If i'm keeping my image within src/images folder, its showing 404 file not found in browser where as its displaying image if its in src/assets folder.

What is the reason behind it and how to load an image from src/images folder..?? 

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" src="./images/img.jpg">
</div>

browser output link for my output

code snap source code snap

Upvotes: 2

Views: 9986

Answers (2)

Chandru
Chandru

Reputation: 11192

Updated latest answer :

follow below steps :

my images located in src => images => 1.png it means located in outside the assets folder

.angular-cli.json

open angular-cli.json file find the assets array add inside the array your folder name like images.

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

componenet.html

<img src="images/1.png">

Upvotes: 1

Leonardo Oliveira
Leonardo Oliveira

Reputation: 1389

The angular-cli generated .angular-cli.json where you can found the project configuration, you use the assets array in .angular-cli.json to list files or folders you want to copy as-is when building your project.

.angular-cli.json

Put your files inside of assets and use: 

<img width="300" src="/assets/images/img.jpg">

Upvotes: 2

Related Questions