MVC Access Resource image

Question

I want to access and return a resource image from a DLL /connected project.

(Its a file, with build action of Resource). It is not listed in properties/resource as there are hundreds of them in the folder.

The idea is that I can call an image controller.

public ImageResult Display(string resourcePath){
     Uri uri = new Uri("pack://application:,,,/ProjectName;component/Images/Vectors/" + resourcePath, UriKind.Absolute);

     // What goes here??
}

The problem is i dont know how to turn the URI into an image, in MVC5.

I want to be able to call it from the view. using the url property of the <img> tag

score 0 · Answer 1 · answered Mar 25 '19 at 03:45

I think you could try WebClient.DownloadData() method to download the image as byte array from specified URI, then convert it to Base64 format with Convert.ToBase64String() and display it on <img> tag using a string property in the viewmodel as src attribute value, below is an example to display the image:

Viewmodel Example

public class ViewModel
{
    // other properties

    // used to pass image into src attribute of img tag
    public string ImageData { get; set; }
}

Controller Action

public ActionResult Display(string resourcePath)
{
     Uri uri = new Uri("pack://application:,,,/ProjectName;component/Images/Vectors/" + resourcePath, UriKind.Absolute);

     using (var wc = new System.Net.WebClient())
     {
         // download URI resource as byte array
         byte[] image = wc.DownloadData(uri);

         // get image extension
         string path = string.Format("{0}{1}{2}{3}", uri.Scheme, Uri.SchemeDelimiter, uri.Authority, uri.AbsolutePath);
         string extension = System.IO.Path.GetExtension(path).Replace(".", "");

         // assign image to viewmodel property as Base64 string format
         var model = new ViewModel();

         model.ImageData = string.Format("data:image/{0};base64,{1}", extension, Convert.ToBase64String(image));

         return View(model);
     }
}

View

@model ViewModel

<img src="@Model.ImageData" ... />

Additional note:

If you already know the extension from the resource URI, you could use it directly instead of using Path.GetExtension, here is an example for JPG format:

model.ImageData = string.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(image));

Related issues:

Image to byte array from a url

MVC How to display a byte array image from model

score 0 · Answer 2 · answered Oct 12 '19 at 14:39

Be sure to register the pack:// scheme as this won't automatically be registered in an MVC app as it is in a WPF app.

In this example code, Blarn0 is a public property in my model class to ensure that the access to the PackUriHelper.UriSchemePack property isn't optimized away when the code is published in Release configuration. I'm sure one can use discards for this very purpose in later versions of C#.

const string scheme = "pack";
if (!UriParser.IsKnownScheme(scheme))
   Blarn0 = PackUriHelper.UriSchemePack;

MVC Access Resource image

2 Answers2