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

Question

我正在尝试在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">

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

Answer 1

你可以试试这个吗

上页

@model ModelNameSpace.PigeonDetails

和你的html元素

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

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

Answer 2

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

其次，删除ViewData位。 您已经为视图使用了Model（如果您改用viewmodel，则更好）。

然后在视图顶部添加@model PigeonDetails ，以显示视图的Model属性。

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

Answer 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" />

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

我希望这可以帮助你。