API Image Request Issue - FileNotFound at URL

Question

The goal I'm trying to accomplish is simply requesting an image from an API, and returning it to the client-side in the form of an append method.

NO, I cannot just handle this in client side altogether because of a user/pass requirement for the API.

NO, I cannot use @Url.Action(ImageFromPath) method in the src of the image.

That said, here's my back-end code:

[HttpGet("api/GetImage")]
public ActionResult ImageFromPath()
{
    string URL = "http://user:pass@MYIPADDRESS/cgi-bin/snapshot.cgi?c=1&authbasic=asdf1234";

    var srcImage = Image.FromFile(URL);
    var stream = new MemoryStream();
    srcImage.Save(stream, ImageFormat.Png);
    return File(stream.ToArray(), "image/png");
}

The goal in client-side is:

$http.get('/api/GetImage').then(function (response) {
    $("#imgDiv").append('<img src="data:image/png;base64,' + response.data + '" />');
});

The problem I'm having is on line srcImage = Image.FromFile(URL), with error:

An exception of type 'System.IO.FileNotFoundException' occurred in CoreCompat.System.Drawing.dll but was not handled in user code

If it makes any difference, the call to the API URL itself requires a couple seconds to return the Image.

Can anyone advise the proper way to get this accomplished? Or at least help in getting my current approach working?

EDIT - I've looked at How can I convert image url to system.drawing.image for an answer, but it only provides solutions using WebClient which is not available in ASP.Net Core yet.

Answer 1

If you want to read a file from URL, you want to use HttpClient.

FilesController.cs

using System;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace DemoWebCore.Controllers
{
    [Route("api/[controller]")]
    public class FilesController : Controller
    {
        // GET api/files/sample.png
        [HttpGet("{fileName}")]
        public async Task<string> Get(string fileName)
        {
            using (HttpClient client = new HttpClient())
            {
                HttpResponseMessage response = await client.GetAsync(
                     "https://i.stack.imgur.com/hM8Ah.jpg?s=48&g=1");
                byte[] content = await response.Content.ReadAsByteArrayAsync();
                return "data:image/png;base64," + Convert.ToBase64String(content);
            }
        }
    }
}

Usage

HomeController.cs

using Microsoft.AspNetCore.Mvc;

namespace DemoWebCore.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
} 

View

<img id="sample-img" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var url = "/api/files/sample.png";
        $.get(url, function (data) {
            console.log(data);
            $("#sample-img").attr('src', data);
        });
    })
</script>

What you are originally doing is reading a file from file system. If the file is located inside your wwwroot folder, this answer might help you.