Loading image from database in mvc.net core

Question

I have a database and a dbinitializer class that populated the database with test data. one of my columns of one of my tables are for storing a string path to images. ie: Image="~/Content/Images/example.img"

then my view model is supposed to render the image for each item in the table.

@foreach (var item in Model) {
        <img style="width:200px;height:250px;" src="@Url.Content(item.Image)" alt="@item.Name" />

}

This exact method works in my normal mvc app but when i tried to emulate the exact same code in my core app the images arent rendering. Does anyone know why I could be getting this problem?

Shyju · Accepted Answer · 2016-12-31 20:49:19Z

2

In ASP.NET core, static files are served from only the wwwroot folder by default. That means if you try to access a file from Contents/Images, which is your root, it won't work.

The good news is, You can configure the static file location as you wish. So update your Configure method in startup.

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
                                                           ILoggerFactory loggerFactory)
{
     // Your existing code goes here

     app.UseStaticFiles();

     app.UseStaticFiles(new StaticFileOptions()
     {
        FileProvider = new PhysicalFileProvider(
              Path.Combine(Directory.GetCurrentDirectory(), @"Content/Images")),
        RequestPath = new PathString("/Images")
     });
}

Now these images can be accessed from the browser like this yourSiteName/Images/imageFile.png

Now you can fix your view code to get image from this path.

@foreach (var item in Model)
{
    <div>
        <img src="@Url.Content("~/Images/"+item.Image)"  />
    </div>
}

Assuming item.Image value for each item in the collection has some value like this MyImage.png and you have an image called MyImage.png located at the Contents/Images which is in your application root (not in the wwwroot directory)

You may also consider moving the images to the wwwroot directory because the ASP.NET team added that directory for purposes like this ( static assets).

edited Dec 31, 2016 at 20:49

answered Dec 31, 2016 at 20:31

Shyju

220k106 gold badges420 silver badges499 bronze badges

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

3 Comments

tocoolforscool Over a year ago

Right after I made this post I remembered seeing the wwwroot folder and altered my item.Image string but I can't seem to make it work with that path. ie: ~/wwwroot/images/cardImages. I think there may be some other subtle nuance that I'm not aware of?

tocoolforscool Over a year ago

The css file and everything else is in this default root folder and I'd like to roll with the conventions of Core. I was advised by a buddy that I should use core so I'm attempting to migrate my project

Shyju Over a year ago

As i explained in the answer, if your images are inside the wwwroot directory, You can access the items inside that via a GET request (simply try to access the resource in the browser). This is because asp.net core allows static file serving from that location. If you have those images in Content folder (on app root like pre asp.net core apps style), you need to make the update to Configure method.

Collectives™ on Stack Overflow

Loading image from database in mvc.net core

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related