Asp.Net MVC, dynamic loading image from database - image blinking

Question

I'm loading an image from database and showing this image in the _Layout.cshtml.

The image can change (after log in) and each company may have a different image, so after the log in, I go to the database and get the corresponded image for that company (based on it's Id). I need to keep this loaded image and is not needful to go to the server again.

Everything work fine, I can load the image and show in the _Layout, but after every request, the Image "blinks" because the _Layout is being recreated.

I've followed this question (step 1) to load the image from database.

The code that I have is:

    public ActionResult CarregarLogoEmpresa()
    {
        if (SecurityManager.Instance.Identity.IsAuthenticated)
        {
            var codigoEmpresaLogada = SecurityManager.Instance.Session.IdEmpresa;

            var logoEmpresa = _empresaAppService.BuscarLogoEmpresa(codigoEmpresaLogada);

            //return Json(Convert.ToBase64String(logoEmpresa), JsonRequestBehavior.AllowGet);

            return File(logoEmpresa, "image/jpg");
        }

        return null;
    }

And in the View:

<img src='@Url.Action("CarregarLogoEmpresa", "Image")' />

Is there a way keep the Image loaded instead of being recreated, avoiding the blinking everytime?

Placing the image outside of the DB would probably allow the browsers cache to not "reload" it. Or have a look at MVC's partialviews, so that you don't have to reload the layout each request. — Mackan
– Mackan, Commented Dec 12, 2016 at 11:06
@Mackan, I made some tests here and I could sort it out with [OutputCache] in the Action. Since the Image must be loaded once (and will not modify) — Maturano
– Maturano, Commented Dec 12, 2016 at 11:34

Douglas Gandini · Accepted Answer · 2016-12-12 12:09:55Z

3

This blink probably occurs because of the time it takes to load the image from the database. I recommend using Asp.Net OutputCache in order to minimize this load time.

Action:

[OutputCahce(VaryByParam="CodigoEmpresaLogada", Duration=30)]
public ActionResult CarregarLogoEmpresa(int CodigoEmpresaLogada)
{
    if (SecurityManager.Instance.Identity.IsAuthenticated)
    {
        var logoEmpresa = _empresaAppService.BuscarLogoEmpresa(CodigoEmpresaLogada);

        //return Json(Convert.ToBase64String(logoEmpresa), JsonRequestBehavior.AllowGet);

        return File(logoEmpresa, "image/jpg");
    }

    return null;
}

View:

<img src='@Url.Action("CarregarLogoEmpresa", "Image", new {CodigoEmpresaLogada = SecurityManager.Instance.Session.IdEmpresa})' />

answered Dec 12, 2016 at 12:09

Douglas Gandini

83711 silver badges24 bronze badges

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

Comments

Andre Pena · Accepted Answer · 2016-12-12 10:54:56Z

1

Your image will blink on every request regardless of it being loaded from the database or not. This effect may be amplified because of the time it takes to pull the image out of the database every time. I would advise you to consider another option, if you have one. If you're using Azure or AWS, for instance, there are file/blob storages you can use to host the image that might be faster than loading it from the database. I particularly don't like storing images on databases because it's expensive and the backups get bigger.

Going back to the "blink" problem. Some sites like GitHub won't reload the "layout" on every request, just the content that changed. The standard library for doing that is pjax (I believe GitHub uses pjax). Even though GitHub is made on Rails, the solution should work fine for ASP.NET MVC too.

Take a look:

answered Dec 12, 2016 at 10:54

Andre Pena

59.7k53 gold badges213 silver badges257 bronze badges

4 Comments

Maturano Over a year ago

That's a good point to analyze. Definitely I'll take a look in those examples. For now, doing some tests, I could sort it out with [OutputCache], I don't know if it's the better approach of doing this as well.

Seabizkit Over a year ago

please correct or better word.. "Your image will blink on every request regardless of it being loaded from the database or not." that is not true. the reason its "blinking" is because the image is pulled every-time from the server and comes from loading the page. having the image as a resource i.e static content... will allow the client browser/pc to cache the image... which means no more "blinking" on page load. The suggestion here should be that if its part of the layout then the image should not be loaded from db or mvc controller and should be normal web content.

Maturano Over a year ago

@Seabizkit, the image is dynamic loaded from the server. It won't be the same for the same people I mean, if someone log in, will display an Image for him, if another person log in, another image will be displayed. The point is that once this image is loaded, it must be the same during the process. By the way, I could sort it out using [OutputCache] from MVC!

Seabizkit Over a year ago

@Maturano i get what your saying.. personal i would have folder structure to support this, create them dynamically and just save the relative path, and then just fetch the path from the DB

Maturano · Accepted Answer · 2016-12-12 11:57:04Z

0

After some researchs, I could sort it out using the Asp.Net MVC ActionFilter

[OutputCache(Duration = 300, VaryByParam="none", Location = OutputCacheLocation.Client)]

on the ActionResult.

I don't know if it's the better approach, but for this case, at least, worked for me.

answered Dec 12, 2016 at 11:57

Maturano

1,0434 gold badges18 silver badges44 bronze badges

1 Comment

Douglas Gandini Over a year ago

The key is the location of cache. Other option is to pass the CodigoEmpresaLogada and store the cache in Any place.

Collectives™ on Stack Overflow

Asp.Net MVC, dynamic loading image from database - image blinking

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related