how to return image url instead of file path

Question

I am facing an issue when showing uploaded image in browser. I get error

Not allowed to load local resource: file:///C:/Office%20Data/dummy/AngularJSAuthentication-master/MyCars/MyCar.API/App_Data/Images/p7.jpeg%20alt=

I wrote the following line of code to store image on server under App_data.

File.Path = Url.Content(string.Format("{0}/{1}", System.Web.HttpContext.Current.Server.MapPath("~/App_Data/Images"), fileName));

File path saved in DB as following

file:///C:/Sample%20Data/dummy/AngularJSAuthentication-master/MyCars/MyCar.API/App_Data/Images/p7.jpeg

HTML

<img ng-src="{{motor.FileUploads[0].Path}} alt="Description" />

After googling i got the reason for this error.

Basically i need to return back Image URL instead of file path.

Problem: I am not sure how i can return image path back to angular client.

Can someone guide me on it.

I have updated my question to answer your question. Please check. — simbada
– simbada, Commented Jun 24, 2016 at 19:44

Sam.C · Accepted Answer · 2016-06-24 21:17:21Z

2

You don't need to specify the complete physical path, when reference from the browser

File.Path = Url.Content(string.Format("~/App_Data/Images/{0}", fileName));

this should return the relative URL

Update : well this won't work since you can directly access contents of the app_data folder. you can approach this either of these ways

move the images out of the app_data folder to like ~/images folder and it should work or
keep the file in the app_data folder but stream the file using content/file result action on one of your controllers

bare minimum sample implementation of the second option would look like

public class UploadsController : Controller
{
    [HttpGet]
    public ActionResult Image( string fileName )
    {
        //!validate file name!
        return File( Server.MapPath( $"~/App_Data/{fileName}" ), "image/jpeg" );
    }
}

then in the HTML it can be referenced as <img src="api/uploads/image?filename=temp.jpg" ...

edited Jun 24, 2016 at 21:17

answered Jun 24, 2016 at 19:48

Sam.C

1,62113 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

simbada Over a year ago

In this case it returns "localhost:26264/App_Data/Images/p5.jpeg" However, still browser says "GET localhost:26264/App_Data/Images/p5.jpeg%20alt= 404 (Not Found)" HTTP Error 404.8 - Not Found The request filtering module is configured to deny a path in the URL that contains a hiddenSegment section.

Sam.C Over a year ago

Ah! I forgot that you can't directly access files stored in App_Data folder. in this case you have two options. I will update the answer

simbada Over a year ago

I have setup two projects Web Api and Web. So you meant in your 1st solution is to create /Images folder under Web Project or Web Api project? fyi: App_Data/Images is under Web Api project. How you udnerstood what i meant here.

Sam.C Over a year ago

Ok if the the web and web api are hosted in different servers then, the relative url is not gonna work for you. so in addition to the option 1 you would have to update your ng binding to append the api url to the img src. With that said, to answer your first question .. yes create images folder under the web api project (that is if that is by design and you intended to do that)

simbada Over a year ago

Thanks a lot. At this stage i may not bother to understand the Pros / Cons of both solutions you said above but i am sticking to solution 1. i.e. Move images folder out of app_data. But i would appreciate if you can explain the second solution and update your answer. May be good for other readers. Thanks again.

Crowcoder · Accepted Answer · 2016-06-24 20:12:20Z

1

Just drop everything except the file name if all your images are in the root of Images:

//using System.IO;

File.Path = Url.Content(string.Format("{0}/{1}", System.Web.HttpContext.Current.Server.MapPath("~/App_Data/Images"), Path.GetFileName(fileName)));

Update

should have been like Sam's answer:

File.Path = Url.Content(string.Format("~/App_Data/Images/{0}",Path.GetFileName(fileName)));

edited Jun 24, 2016 at 20:12

answered Jun 24, 2016 at 19:45

Crowcoder

11.6k3 gold badges39 silver badges46 bronze badges

4 Comments

simbada Over a year ago

I did not get you much. Basically, my App_Data/Images folder is under Web Api project and Angular Client is under different project. Hope you understand what i am saying.

Crowcoder Over a year ago

I guess I don't understand. If the file is uploaded to AppData this would work.

Nikhil Girraj Over a year ago

Isn't Server.MapPath supposed to give you the physical location? msdn.microsoft.com/en-us/library/…

Crowcoder Over a year ago

@NikhilGirraj, yes, the main point of my answer was the Path.GetFileName part. I will update.

Collectives™ on Stack Overflow

how to return image url instead of file path

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related