尝试从 mvc 中的服务器调用和绑定 img src 标签中的图像答案

【问题标题】：Trying to call and bind image in img src tag from server in mvc尝试从 mvc 中的服务器调用和绑定 img src 标签中的图像
【发布时间】：2019-11-29 17:16:57
【问题描述】：

您好，我正在尝试在 mvc 的 img 标签中绑定图像。这个标签在 asp.net 中使用，就像我想在 MVC/ 中绑定图像一样例如 ASP.NET

<img alt="User Image" width="80px" height="80px" class="img img-thumbnail" src='<%="http://196.0.2.201/p001.ashx?pf=YY&cid="+Session[CommonConstants.SESSION_USER_ID] %>'/>

在mvc中

我想传递 @ViewBag.session 作为参数而不是 Session[CommonConstants.SESSION_USER_ID] 如何在 Mvc 中实现它，任何想法都将不胜感激。

【问题讨论】：

标签： c# html asp.net-mvc

【解决方案1】：

如果您使用 MVC，为什么不在构建页面时在服务器上使用 base64 图像并将其嵌入图像 src 中，例如使用 Razor：

<img src="data:image/jpeg;base64, @Model.Base64Image">

这样，用于生成图像的任何逻辑都是构建页面的同一控制器逻辑的一部分。一步步：您的剃须刀页面顶部将有一个 @model ViewModel 指令，并且您在上面填充的某处有一个图像元素，jpeg 部分可以是任何图像类型，必须与正在编码的类型匹配。在这种情况下，您的视图模型应该有一个名为 Base64Image 的字符串属性。你的控制器应该有一个获取和转换图像的部分，例如

        public IActionResult Index()
        {
            var model = new ViewModel();

            // important thing here is to convert the image into a byte array:
            var imageBytes = System.IO.File.ReadAllBytes(@"image.jpeg");
            // Convert byte array to Base64 String
            model.Base64Image = Convert.ToBase64String(imageBytes);

            // return View model with base64 encoded image to page
            return View(model);
        }

在客户端渲染的页面会有一个类似这样的图像元素。

<img src="data:image/jpeg;base64, TWFuIGlzIGRpc3RpbmdR== ">

base64 编码将有数百个字符长。这样做，客户端不需要进行第二次调用来获取页面中已经存在的图像。您要做的是定义一个端点，客户端将调用该端点来获取图像。

【讨论】：

我在 img 标签内尝试这样，如果您有任何想法，请更正 src="@Url.Content("'192.0.1.201/p001.ashx?pf=YY&cid='"+ViewBag.session)"
我已经用更多的实现细节扩展了我的答案。

【解决方案2】：

声明一个新模型

public class ModelImg { public int MyProperty1 { get; set; } public bool MyProperty2 { get; set; } public string Img { get; set; } }
在控制器中使用你的对象：

ModelImg model = new ModelImg(){Img = @"MyImgAsString",MyProperty1 = 1,MyProperty2 = true};

将您的对象或您的 img 直接分配给控制器视图中的 ViewData：

ViewData["Img"] = model.Img;

在您的视图中分配您的 src ：

<img alt="User Image" width="80px" height="80px" class="img img-thumbnail" src='ViewData["Img"]'/>

【讨论】：