c# - 如何在 mvc4 中显示来自本地磁盘的图像？

Question

在我的 MVC(4) 应用程序中，我从本地目录中获取图像文件并将其显示在浏览器中。

我model要存储详细信息，controller要获取文件并view要显示它们。

模型

public class ImageModel
{
    List<string> _images = new List<string>();

    public ImageModel()
    {
        _images = new List<string>();
    }

    public List<string> Images
    {
        get { return _images; }
        set { _images = value; }
    }
}

控制器

public ActionResult Index()
{
    var imageFiles = new ImageModel();
    imageFiles.Images.AddRange(Directory.GetFiles(@"c:\mypath"));
    return View(imageFiles);
}

看法

@for (int imgIndex = 0; imgIndex < Model.Images.Count; imgIndex++)
{
    <div >
      <img src = @Model.Images[imgIndex] alt="Image"  />
    </div>
}

但我无法在浏览器中查看图像，它显示带有alt.

我在这里错过了什么？我应该创建一个虚拟目录而不是物理位置。

Answer 1

首先，本地文件需要file:// URI 方案。您似乎将本机文件路径用作 img src。

但是浏览器安全模型禁止使用来自 Web 服务器提供的页面内部的本地源（http://、https:// 协议）。

要解决您的情况，请实现一个控制器，该控制器将所需的图像文件名作为参数，并使用 File() 操作提供其内容。

Answer 2

查看代码片段，在我看来，您忘记用引号将路径括起来

<img src = "@Model.Images[imgIndex]" alt="Image"  />

但查看整体代码，我建议使用相对路径。

UPD：对于更详细的解释，我会推荐这篇博文

Answer 3

问题是你的路径名。这可能会有所帮助：

控制器：

public ActionResult Index()
{
        var imageFiles = new ImageModel();
        imageFiles.Images.AddRange(System.IO.Directory.GetFiles(@"C:\wherever\files\are\"));
        for (int i = 0; i < imageFiles.Images.Count; i++)
        {
            // get rid of the fully qualified path name
            imageFiles.Images[i] = imageFiles.Images[i].Replace(@"C:\wherever\files\are\", "");
            // change the slashes for web
            imageFiles.Images[i] = imageFiles.Images[i].Replace('\\','/');
        }
        return View(imageFiles);
}

看法：

@for (int imgIndex = 0; imgIndex < Model.Images.Count; imgIndex++)
{
    <div >
      <img src = "@Model.Images[imgIndex]" /> <!-- put the file in quotes -->
    </div>
}