Access image on IIS server from client via Url | ASP .Net

Question

My application is an Api ASP.Net, and I save the images in the "wwwroot" folder

Content

When I publish my application that structure is created as well and I want to access the images through a URL

From Client Angular 2

<img  src="{{ 'http://192.168.1.20/Api/api/uploads/Koala.jpg'}} " > 
(Not Found)

I must mention, that my application is published locally, and users connected to the network must access the images

Question

How to access the image found on the IIS server with the Url? I am right? Correct me if I'm wrong Thank you all

Answer 1

First try to access the image url on the browser ie,

http://localhost/Api/api/uploads/Koala.jpg

If it displays the image then there is not problem with you IIS hosting.

Now try the same url from a different machine in the network ie,

http://192.168.1.20/Api/api/uploads/Koala.jpg (from a different machine)

If it does not work then make sure that you machine accepts http inbound traffic over the network.

Answer 2

Use tilde ~ for relative URL in paths :

<img  src="{{ '~/uploads/Koala.jpg'}} " > 

Answer 3

Maybe <img id="Image" runat="server" src="~/Images/img.jpg" />

Answer 4

Based on my understanding, you shouldn't specify the full URL in <img src="{{ }}">.

If you want to specify full URL in Src attribute, you don't need angular. You should just remove {{''}} and modify the URL to

<img  src="http://192.168.1.20/Api/api/uploads/Koala.jpg" > 

If you want to use angular2 in this case, you should just modify the URL like

 <img src="{{imageUrl}}">

Then declare the variable imageUrl in Component.