Question 243477 in ASP.NET Question posted in
The official documentation can be found here.

Asp.net – How to display image from controller to view?

I have images in a folder and not in the database, i want to display the particular image (my image path is in the form of string) from controller to view, with other data in asp.net 6 mvc

I tried Viewbag, tempdata and all the other things. I am unable to find a way in .net 6, all the solutions are in previous version which is not working in .net 6

Things i have tried
view
//

controller

{
  var data = _context.tbl_scotequine.Where(e => e.Ueln == ueln)
            .Select(e => new EquineCard
            {
                name = e.Name1,
                colour = e.Colour,
                sex = e.Gender,
                microchip = e.Microchip1
               //Path = $"C:/Users/sonia/Downloads/scotequine original source code/storage/data/cards/uploads/cropped{ueln}.jpg"
              }); 
                var res = data.ToList()[0];
                
                ViewBag.Path = Url.Content($"C:/Users/sonia/Downloads/scotequine original source code/storage/data/cards/uploads/cropped{ueln}.jpg"); 
                return View(res);
}

I have also tried this

{
                var Path = $"C:/Users/sonia/Downloads/scotequine original source code/storage/data/cards/uploads/cropped{ueln}.jpg";

              
                var data = _context.tbl_scotequine.Where(e => e.Ueln == ueln)
                .Select(e => new EquineCard
                {
                    name = e.Name1,
                    colour = e.Colour,
                    sex = e.Gender,
                    microchip = e.Microchip1
                    image = Encoding.ASCII.GetBytes(Path)
            }); 
                var res = data.ToList()[0];
Tags:

2

Answers


  1. 0

    If to pass the local file location path to the view:

    ViewBag.Path = Url.Content($"C:/Users/sonia/Downloads/scotequine original source code/storage/data/cards/uploads/cropped{ueln}.jpg"); 
return View(res);

    Then in the view use an additional method to obtain an image from the server side:

    <div>   
    <img src="@Url.Action("GetImage", new { path = ViewBag.Path })" alt="File not found"/>
</div>

    The controller side code:

    public FileContentResult GetImage(string path)
{
    if (System.IO.File.Exists(path))
    {
        new FileExtensionContentTypeProvider().TryGetContentType(path, out string? contentType);
        var ctype = contentType ?? "application/octet-stream";
        byte[] bytes = System.IO.File.ReadAllBytes(path);
        return new FileContentResult(bytes, ctype);
    }
    return null;
}

    Actually, if you have some file identifier like Ueln in your code, preferably to use it and pass to the view and then to the GetImage method instead of manipulating with the full file path.

    Login or Signup to reply.
  2. 0

    In your controller action, you’re already retrieving the image path and setting it in the ViewBag. However, you should use Url.Content to generate a URL relative to the web application root

    public IActionResult YourAction(string ueln){
var data = _context.tbl_scotequine.Where(e => e.Ueln == ueln)
    .Select(e => new EquineCard
    {
        name = e.Name1,
        colour = e.Colour,
        sex = e.Gender,
        microchip = e.Microchip1
    });

var res = data.FirstOrDefault(); // Use FirstOrDefault to avoid exceptions

if (res != null)
{
    string imagePath = $"~/data/cards/uploads/cropped{ueln}.jpg"; // Assuming it's in your wwwroot directory
    ViewBag.Path = Url.Content(imagePath);
    return View(res);
}
else
{
    // Handle the case when no data is found
    return NotFound(); // or any other appropriate action
}

    }

    In your view (YourView.cshtml), you can display the image using the img tag with the URL from ViewBag.Path:

    <img src="@ViewBag.Path" alt="Equine Image" />

    Make sure the image path provided in imagePath is relative to the wwwroot directory, which is where static files like images should be stored in an ASP.NET Core application. The Url.Content method generates a URL that is relative to the web application root.

    Ensure that your application is configured to serve static files from the wwwroot folder in your Startup.cs

    public void Configure(IApplicationBuilder app){
// ... other middleware setup

app.UseStaticFiles(); // Enable serving static files from wwwroot

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search