Asp.Net MVC，从数据库动态加载图像 - 图像闪烁答案

【问题标题】：Asp.Net MVC, dynamic loading image from database - image blinkingAsp.Net MVC，从数据库动态加载图像 - 图像闪烁
【发布时间】：2016-12-12 20:09:55
【问题描述】：

我正在从数据库中加载图像并在 _Layout.cshtml 中显示该图像。

图像可以更改（登录后），每个公司可能有不同的图像，所以登录后，我进入数据库并获取该公司对应的图像（基于它的 ID）。我需要保留这个加载的图像，不需要再次访问服务器。

一切正常，我可以加载图像并在 _Layout 中显示，但在每次请求后，图像“闪烁”，因为正在重新创建 _Layout。

我已按照this 问题（步骤 1）从数据库加载图像。

我的代码是：

    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;
    }

在视图中：

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

有没有办法让图像保持加载而不是重新创建，避免每次都闪烁？

【问题讨论】：

你能把你的代码贴出来吗？
@antoinedelia 准备好了！
将图像放在数据库之外可能会允许浏览器缓存不“重新加载”它。或者看看 MVC 的 partialviews，这样就不必每次请求都重新加载布局。
@Mackan，我在这里做了一些测试，我可以在 Action 中使用 [OutputCache] 对其进行排序。由于图像必须加载一次（并且不会修改）

标签： c# asp.net-mvc

【解决方案1】：

出现这种闪烁可能是因为从数据库加载图像需要时间。我建议使用 Asp.Net OutputCache 以尽量减少加载时间。

行动：

[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;
}

查看：

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

【讨论】：

【解决方案2】：

无论是否从数据库加载，您的图像都会在每次请求时闪烁。由于每次将图像从数据库中拉出所需的时间，这种影响可能会被放大。我建议你考虑另一种选择，如果你有的话。例如，如果您使用 Azure 或 AWS，则可以使用文件/blob 存储来托管图像，这可能比从数据库加载图像要快。我特别不喜欢将图像存储在数据库中，因为它很昂贵而且备份会变得更大。

回到“眨眼”问题。像 GitHub 这样的一些网站不会在每个请求上重新加载“布局”，只会重新加载更改的内容。这样做的标准库是pjax（我相信 GitHub 使用 pjax）。即使 GitHub 是在 Rails 上制作的，该解决方案也应该适用于 ASP.NET MVC。

看看：

【讨论】：

这是一个很好的分析点。我肯定会看看这些例子。现在，做一些测试，我可以用 [OutputCache] 解决它，我不知道这是否也是这样做的更好方法。
请更正或更好的词.. “无论是否从数据库加载，您的图像都会在每次请求时闪烁。”那不是真的。它“闪烁”的原因是因为图像每次都是从服务器中提取的，并且来自加载页面。将图像作为资源，即静态内容......将允许客户端浏览器/PC缓存图像......这意味着页面加载时不再“闪烁”。这里的建议应该是，如果它是布局的一部分，那么图像不应该从 db 或 mvc 控制器加载，应该是正常的 web 内容。
@Seabizkit，图片是从服务器动态加载的。我的意思是，对于同一个人来说，情况就不一样了，如果有人登录，将为他显示一个图像，如果另一个人登录，将显示另一个图像。关键是一旦加载了这个图像，在这个过程中它必须是相同的。顺便说一句，我可以使用 MVC 中的 [OutputCache] 对其进行排序！
@Maturano 我明白你的意思.. 个人我会有文件夹结构来支持这一点，动态创建它们并保存相对路径，然后从数据库中获取路径

【解决方案3】：

经过一些研究，我可以使用 Asp.Net MVC ActionFilter 对其进行整理

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

在 ActionResult 上。

我不知道这是否是更好的方法，但至少对于这种情况，对我有用。

【讨论】：

关键是缓存的位置。其他选项是传递 CodigoEmpresaLogada 并将缓存存储在任何地方。