如何在 HTML <img src> 中引用控制器字符串答案

【问题标题】：How to reference controller string in HTML <img src>如何在 HTML <img src> 中引用控制器字符串
【发布时间】：2018-11-22 21:14:37
【问题描述】：

我试图在 img 标签的 src 中显示我的控制器字符串，但是是的，我失败了。

这是我的模型代码：

public class PigeonDetails
{
    [Key]
    public int PigeonID { get; set; }

    [Required]
    [Display(Name = "Ring Number")]
    public string RingNumber { get; set; }

    [Display(Name = "Pigeon Name")]
    public string Name { get; set; }

    [Required]
    [Display(Name = "Pigeon Color")]
    public string Color { get; set; }

    [Required]
    [Display(Name = "Gender")]
    public string Sex { get; set; }

    [Required]
    [Display(Name = "Year Type")]
    public int Year { get; set; }

    [Display(Name = "Description")]
    public string Description { get; set; }

    [Display(Name = "Date Added")]
    public DateTime DateAdded { get; set; }

    public string Image { get; set; }

}

这是我的控制器 - 只有我使用的方法：

[HttpGet]
    // GET: PigeonDetails/Edit/5
    public async Task<IActionResult> Edit(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var pigeonDetails = await _context.PigeonDetails.SingleOrDefaultAsync(m => m.PigeonID == id);

        string placeholder = _context.PigeonDetails.Where(u => u.PigeonID == id).Select(u => u.Image).ToString();
        pigeonDetails.Image = placeholder;
        if (pigeonDetails == null)
        {
            return NotFound();
        }
        ViewData["ImagePath"] = pigeonDetails;
        return View(pigeonDetails);
    }

pigeonDetails.Image 是存储在数据库中的字符串（图像路径 - 它存储正确）

这是我的html：

  @{var image = (PigeonDetails)ViewData["ImagePath"];}

 <img src="@image.Image" id="profile" alt="user" class="img-responsive radius">

它没有在页面上显示我的图像，请帮助。

【问题讨论】：

尝试在return View(pigeonDetails);之前设置ViewData["ImagePath"] = pigeonDetails;
我做到了，但没有运气。
能否请您出示您的控制器的完整代码
就是这样，我编辑了帖子
你是否在视图顶部指定了任何@model？

标签： c# html asp.net-core

【解决方案1】：

你可以试试这个

首页

@model ModelNameSpace.PigeonDetails

和你的 html 元素

<img src="@Model.Image" id="profile" alt="user" class="img-responsive radius">

请更改命名空间。这只是示例命名空间名称；）

【讨论】：

【解决方案2】：

首先，删除字符串placeholder，因为如果它与id匹配，则 pigeonDetails 已经拥有它。 IQueryable 上的.ToString() 也存在问题，因为它将返回接收调用的对象的运行时类型的完全限定名称。

第二，移除 ViewData 位。您的视图已经有了 Model（如果您改用 viewmodel 会更好）。

然后在您的视图顶部添加@model PigeonDetails，为您的视图公开模型属性。

最后，<img src="@Model.Image" />

【讨论】：

【解决方案3】：

这就是我会做的。我删除了很多不必要的代码。

我对你的Edit 操作方法做了相当多的修改：

[HttpGet]
public async Task<IActionResult> Edit(int? id)
{
     if (id == null)
     {
          return NotFound();
     }

     PigeonDetails pigeonDetails = await _context.PigeonDetails
          .Where(m => m.PigeonID == id)
          .SingleOrDefaultAsync();

     if (pigeonDetails == null)
     {
          return NotFound();
     }

     return View(pigeonDetails);
}

在您的Edit 查看页面中执行以下操作：

@model YourNamespace.PigeonDetails

<img src="@Model.Image" id="profile" alt="user" class="img-responsive radius" />

远离视图数据，首选且更安全的方法是使用视图模型。

希望对你有帮助。

【讨论】：