无法将 Base64 图像设置为背景图像 MVC

Question

我正在尝试设置从模态获取的 Base64 图像作为我的身体 HTML。

因此，在我渲染 css 的@section中，我添加了以下代码：

@section Css {
    <link href="@Url.Content("~/css/index.css")" rel="stylesheet" />
    <style>
        body {
            background-color: @Model.bg_color;
            background-image: url(data:image/png;base64,@Model.bg_image);
        }
    </style>
}

@Model.bg_image中的图像采用正确的 base64 格式，因为通过在其中一个在线 Base64 转换器中设置它的值，它可以生成正确的图像。

但是当页面加载时，我得到以下错误，而不是让图像显示为我的背景图像：

GET data:image/png;base64,/9j/4AAQSkZJRgABAgEAAAAAAAD/7gAOQWRvYmUAZAAAAAAB/9sAQwAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8f/9sAQwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgBsgMAAwERAAIRAQMRAf/EAB0AAAEFAQEBAQAAAAAAAAAAAAUBAgMEBgcACAn/xABREAACAQMDAgQDBQYDBgMFAw0BAgMAEQQhEgUxQVEiEwZhcTKBkUIUB6GxwVIjM9FiFeFygkMkNPDxFpKissJT0mNzgzU2k7NUdCXiRCYXCP/EABoBAAMBAQEBAAAAAAAAAAAAAAABAgMEBQb/xAA4EQACAgIBAwIFAgUCBwEAAwAAARECIQMxQRIEUSJhcTITBfCBkaGxwULRFOFSYnKCIzPxokMV/9oADAMBAAIRAxEAPwDsvG8QmFNlSnJlyZMuX1WeU32ix8i26KL1ChKENsJCOyEDS5PTpQIU3ta97WG463tQBFl3MQ00BBNNCK& net::ERR_INVALID_URL

JSFiddle 中的HTML

编辑：我刚刚注意到Model.bg_image的集合，就像+ char 设置为+ 所以图像不会被渲染

Answer 1

你应该转换成字符串，试试这个；

 @{
 string imgSrc = "";
if (Model.bg_image != null)
 {
 var base64 = Convert.ToBase64String(Model.bg_image);
 imgSrc = String.Format("data:image/gif;base64,{0}", base64);
 }
 }

 @section Css {
  <link href="@Url.Content("~/css/index.css")" rel="stylesheet" />
  <style>
    body {
        background-color: @Model.bg_color;
        background-image: url(@imgSrc);
    }
   </style>
 }

Answer 2

JSFiddle 中的 Base64 字符串包含 HTML 转义+字符：

[...] a97WG463tQBFl3MQ00BBNNCK+ZxuByOLHB [...]

您可能想使用@Html.Raw() function 来保持 ASP.NET 从 escaping Z1EB6 BF6BF35FA778CZ 字符串：4345FA6BD0778C43

background-image: url(data:image/png;base64,@Html.Raw(Model.bg_image));