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 scheme。您似乎使用本机文件路径作为img src。

但浏览器安全模型禁止在Web服务器提供的页面内使用本地源（http：//，https：// protocols）。

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

Answer 2

查看代码片段，在我看来，您忘记用引号

包围路径

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

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

UPD：有关更详细的解释，我会重新考虑this blog post

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

如何在mvc4中显示本地磁盘的图像？

3 个答案: