图片不会加载到asp.net mvc 5中

Question

在此先感谢您的帮助。我正在创建一个Web应用程序，它将图像文件保存为该模型的CauseController上的“创建”和“编辑”操作的一部分。但是，尽管能够在Content目录中成功创建新文件夹并为创建的每个实例保存图像，但我无法将照片显示在构建视图中。

这是模型类（它类似于change.org的项目）：

public class Cause
{   

    [Key]
    [StringLength(100)]
    public string CauseTitle { get; set; }
    [Required]
    [StringLength(500)]
    public string Description { get; set; }
    [Required]
    public string Author { get; set; }
    [Required]
    public DateTime DatePosted { get; set; }
    public string ImageURL { get; set; }
    public string CatagoryTitle { get; set; }
    [ForeignKey("CatagoryTitle")]
    public Catagory Catagory { get; set; }

    public virtual List<Signature> Signatures { get; set; }
}

这是[Post] Create动作方法：

 [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "CauseTitle,Description,Author,DatePosted,CatagoryTitle")] Cause cause, HttpPostedFileBase UploadImage)
    {
        if (ModelState.IsValid)
        {
            if (UploadImage != null)
            {
                if (UploadImage.ContentType == "image/jpg" || UploadImage.ContentType == "image/png" || UploadImage.ContentType == "image/bmp" || UploadImage.ContentType == "image/gif" || UploadImage.ContentType == "image/jpeg")
                {
                    string causeTitle = cause.CauseTitle;
                    string subPath = "~/Content/" + causeTitle; // your code goes here
                    System.IO.Directory.CreateDirectory(Server.MapPath(subPath));

                    UploadImage.SaveAs(Server.MapPath(subPath) + "/" + UploadImage.FileName);
                    cause.ImageURL = subPath + causeTitle + UploadImage.FileName;
                }
                else
                    return View();
            }
            else
                return View();
            db.Causes.Add(cause);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

            ViewBag.CatagoryTitle = new SelectList(db.Catagories, "CatagoryTitle", "CatagoryDescription", cause.CatagoryTitle);
            return View(cause);
        }

这是观点的一部分：

        @foreach (var item in Model)
{
<div class="jumbotron" style="background-image: url(@item.ImageURL) background-size: 100%" >
    <img src="urlPath" alt="urlPath" />
    <h1>@Html.DisplayFor(model => item.CauseTitle)</h1>
    <p>@Html.DisplayFor(model => item.Description)</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Sign Cause</a></p>
</div>

生成的元素在Chrome Developer中显示此尝试。

我也试过这个：

@foreach (var item in Model)
    {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.CauseTitle)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Catagory.CatagoryTitle)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Author)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DatePosted)
        </td>
        <td>
            <img src="@item.ImageURL" alt="Alternate Text" />
        </td>

对于此示例，元素在Chrome Developer中显示。在这种情况下，这是正确的文件路径。

我在Cause表中查看了数据库，ImageUrl列的值遵循这种模式（如预期的那样）：〜/ Content / [Cause Title] / [Image Title] .jpg。

我已经查看了类似问题的所有其他答案，但找不到适用于我的解决方案。任何帮助，将不胜感激。谢谢

Answer 1

将最终的td更改为使用@ Url.Content，如下所示。这总是给出一个相对路径。

<td>
       <img src="@Url.Content(item.ImageURL)" alt="Alternate Text" />
</td>