HTML page with images using .net WebApi

Question

I'm using .net WebApi to expose different endpoints with JSON data. Now I need that an specific endpoint returns HTMLs pages. I have implemented it like this.

[HttpGet]
[Route("htmlPage/{htmlPageId}")]
public HttpResponseMessage GetHtmlPage(string htmlPageId) {
    string rawHtml = m_logic.GetHtmlPageById(htmlPageId);
    HttpResponseMessage response = new HttpResponseMessage {Content = new StringContent(rawHtml)};
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
    return response;
}

The problem that I'm facing is when that HTML page have some images. I don't know how to expose them because now I'm getting a 404 not found error when I call my endpoint from my browser. I have a folder in my project with these images and some Javascript scripts that I must return.

How can I do this?

EDIT: This is part of my HTML

  <html lang=\"en\">
  <head>
    <title> Simplest HTML </title>
    <meta name=\"description\" content=\"The Html served\">
    <meta name=\"author\" content=\"acostela\">
    <script type="text/javascript" src="./public/scripts/my-api.js"></script>
  </head>
  <body>
    <h1> The first Simplest html served!!</h1>
    <img src="./public/img/success.jpg"/></br></br>
  </body>
</html>

My folder structure is the following

 -->Html
     |
     |
      ---> myFirstHtml.html
     |
     |
      ---> public
           |
           |
           ---> img
           |    |
           |    |
           |    ---> success.jpg
           |
           |
           ---> scripts
                |
                |
                ---> my-api.js

@Ygalbel I tried your solution but I'm getting the same error. GET localhost:8888/endpoint/~img/success.jpg 404 (Not Found) — acostela
– acostela, Commented Feb 16, 2017 at 7:36
With your structure it should be localhost:8888/public/img/sucess.jpg — Ygalbel
– Ygalbel, Commented Feb 16, 2017 at 7:59
I know what my problem is! I must add a fileServer middleware to my webApi. I will do it in the next days! Thank you very much for your help! @Ygalbel — acostela
– acostela, Commented Feb 16, 2017 at 8:22

acostela · Accepted Answer · 2017-02-16 14:40:21Z

1

Finally I solved it. I added a static file server middleware using owin+katana.

I changed my startup class using this

public void Configuration(IAppBuilder application)
    {
        //Other webApi configuration
            application.UseFileServer(new FileServerOptions()
            {
                RequestPath = new PathString("/html/public"),
                FileSystem = new PhysicalFileSystem(@"../../../MyProject/html/public"),
            });

Now automatically all images scripts and files that are under public are served when my html page is requested via my webApi.

What does this code is to translate my http requests "/html/public" to my real file system path specified in PhysicalFileSystem.

Hope this help anybody.

answered Feb 16, 2017 at 14:40

acostela

2,7573 gold badges36 silver badges52 bronze badges

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

Comments

Ygalbel · Accepted Answer · 2017-02-15 14:45:10Z

0

WebApi can serve static file.

So you just have to set the right link in your html file.

For example:

Your <img> will be like this:

<img src="~/Content/img/email-icon.png" />

answered Feb 15, 2017 at 14:45

Ygalbel

5,5491 gold badge27 silver badges33 bronze badges

2 Comments

acostela Over a year ago

This is not working. I'm getting same error. GET <URL> 404 (not found)

Ygalbel Over a year ago

Which url you try to reach? Can you share part of html code?

Collectives™ on Stack Overflow

HTML page with images using .net WebApi

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related