Angular 4 :Unable to open 'image.png': no provider for the image

Question

I have recently started learning angular 4 and came up with a very basic issue. I tried giving path of an image in the img tag but got the following error

Unable to open 'image.png': no provider for c:/Surbhi/MyPractice/image.png. Code snippet is given below.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="C:\Surbhi\MyPractice\image.png">
</div>
<h2>ABC </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

you wont be able to render img by providing absolute path. Place it in the asset folder and then provide relative path — Shashank Vivek, Apr 23 '18 at 10:12

score 1 · Accepted Answer · answered Apr 23 '18 at 10:12

1

Put your image in assets folder and give path something like this

<img width="300" alt="Angular Logo" src="/assets/images/image.png">

answered Apr 23 '18 at 10:12

Pardeep Jain

84,110
37
165
215

Is there any other way we can give absolue path, or the only approach possible is through assets folder only – NightLight Apr 23 '18 at 10:22

score 0 · Answer 2 · answered Apr 23 '18 at 10:22

0

It is a convention to put the images we use in the project in the assets folder of the respective project. And please research the problems a little more. maybe refer to this

answered Apr 23 '18 at 10:22

MadaZZ

75
8

Angular 4 :Unable to open 'image.png': no provider for the image

2 Answers2