图像不会在 asp.net mvc 5 中加载

Question

提前感谢您的帮助。我正在制作一个网络应用程序，它将图像文件保存为该模型的 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] 创建操作方法：

 [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 开发人员中。

我也试过这个：

@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 开发人员中。在这种情况下，这是正确的文件路径。

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

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

Answer 1

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

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