.Net MVC - 如何在文件系统中呈现图像

I am trying to simply display some images in a slidereel having been uploaded via a basic html form. Currently, the action method from the form stores the path of the images in the database as part of a slide object/element and then saves them to the stored location.

我试图通过基本的html表单在幻灯片中简单地显示一些图像。当前,来自表单的动作方法将图像的路径存储在数据库中作为幻灯片对象/元素的一部分,然后将它们保存到存储的位置。

Then in my index view I have partial view that gets given a list of slide objects and uses the image path stored in the database as the image elements src. The correct ppaths are being retrieved but the images are failing to load. I have even copy pasted the src path from firebug and put it in the browser and file explorer to check that the image does in-fact exist at that path. I don't know why it is failing to load the images even though they exist where the src states it should be. I have tried hard coding a relative path to a file in my content directory, and this works, but obviously that doesnt help me when it comes to using the uploaded images. Is it something to do with the full file path (i.e. c:/...) or is it the fact they are in app data?

然后在我的索引视图中,我有局部视图,它获得了一个幻灯片对象列表,并使用存储在数据库中的图像路径作为图像元素src。正在检索正确的ppath,但图像无法加载。我甚至复制粘贴来自firebug的src路径并将其放入浏览器和文件资源管理器中以检查图像确实存在于该路径中。我不知道为什么它没有加载图像,即使它们存在于src应该存在的地方。我已经尝试过硬编码我的内容目录中文件的相对路径,这很有效,但很明显,在使用上传的图像时,这对我没有帮助。它与完整文件路径(即c:/ ...)有关,还是它们在应用程序数据中?

Here is my forms action method:

这是我的表单操作方法:

[HttpPost]
[Route("create")]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(Slide model, HttpPostedFileBase file)
{
   if (!ModelState.IsValid)
   {
      return View(model);
   }

   var user = await GetLoggedInUser();

   if (string.IsNullOrWhiteSpace(model.Id))
   {
      model.Id = model.Title;
   }

   model.Id = model.Id.MakeUrlFriendly();
   model.Created = DateTime.Now;
   model.AuthorId = user.Id;

   if (file != null && file.ContentLength > 0)
   {
      try
      {
         var extension = Path.GetExtension(file.FileName);
         var fileName = Path.GetFileNameWithoutExtension(file.FileName);    
         var path = Path.Combine(Server.MapPath("~/App_Data/uploads/slides"), fileName + extension);

         for (int i = 1; System.IO.File.Exists(path); i++)
         {
            path = Path.Combine(Server.MapPath("~/App_Data/uploads/slides"), fileName + "_" + i.ToString() + extension);
         }

         file.SaveAs(path);
         model.Image = path;
      }
      catch (Exception e)
      {
         ModelState.AddModelError("key", e);
         return View(model);
      }
   }

   try
   {
      _repository.Create(model);
      return RedirectToAction("index");
   }
   catch (Exception e)
   {
      ModelState.AddModelError("key", e);
      return View(model);
   }
}

and here is my action method to populate the partial view:

这是填充局部视图的动作方法:

public async Task<PartialViewResult> Slideshow()
{
   var slides = _slides.GetPublishedSlides();

   if (!slides.Any())
   {
      //return (PartialView("_Banner"););
   }

   return PartialView("_Slideshow", slides);
}

and here is the partial view itself:

这是局部视图本身:

@model IEnumerable<demo.Models.Slide>

<!-- BEGIN .slideshow -->
<div class="slideshow radius-full">
    <!-- BEGIN .flexslider -->
    <div class="flexslider radius-full loading" control-nav="true" data-speed="10000" data-transition="slide">
        <!-- BEGIN .slides -->
        <ul class="slides">
            @foreach (var slide in Model)
            {
                <li>
                    <!-- BEGIN .sixteen columns -->
                    <div class="sixteen columns">
                        <a class="feature-img radius-full" href="@slide.Link" rel="bookmark" title="@slide.Title">
                            <img src="@slide.Image" alt="@slide.Title" /> // ~/Content/img/demoslide.png works
                        </a>   
                    <!-- END .sixteen columns -->
                    </div>
                </li>
            }
        <!-- END .slides -->
        </ul>
    <!-- END .flexslider -->
    </div>
<!-- END .slideshow -->
</div>

Any help would be greatly appreciated

任何帮助将不胜感激

2 个解决方案

#1

This is because of you specify a physical path (Server.MapPath) on the server in this line.

这是因为您在此行中的服务器上指定了物理路径(Server.MapPath)。

path = Path.Combine(Server.MapPath("~/App_Data/uploads/slides"), fileName + "_" + i.ToString() + extension);

You should use a virtual path instead.

您应该使用虚拟路径。

#2

When you "copy pasted the src path .. and put it in the browser and file explorer .. the image does exist at that path" your source path begins with "C:\". (or some other drive letter)

当你“复制粘贴src路径..并将其放入浏览器和文件资源管理器...图像确实存在于该路径”时,源路径以“C:\”开头。 (或其他一些驱动器号)

When you specify img src=, you can't use "C:\". You need to use "http://site/..." etc.

指定img src =时,不能使用“C:\”。您需要使用“http:// site / ...”等。

Change

model.Image = path;

model.Image = Path.GetFileNameWithoutExtension(path);

then change your <a> to:

然后将您的更改为:

<img src="@(Url.Content("~/App_Data/uploads/slides/") + @slide.Image)" ...

(or store just the filename part or the "~/.." part earlier in the code).

(或者只存储代码中较早的文件名部分或“〜/ ..”部分)。

The key is @Url.Content to convert your site's path to an 'href' url.

关键是@ Url.Content将您网站的路径转换为'href'网址。

Always check your rendered html (browser view-source) to see what it in the a src= and imagine how it would loaded from another PC (C:..image) won't exist on another PC.

总是检查你渲染的html(浏览器视图源)以查看它在src中的含义=并想象如何从另一台PC(C:..图像)加载它将不存在于另一台PC上。

Browsers generally block anything in html pointing at "C:\" these days for security reasons.

出于安全原因,浏览器通常会在html中阻止指向“C:\”的任何内容。

#1