Question

我在查看正确显示在视图中的饼图时遇到问题。使用下面的代码，我已确认字节已成功写入模型并传递给视图。我甚至已经确认我可以将饼图保存到视图中目录中的PNG文件，但每次我尝试在浏览器中显示饼图时，都不会显示图像。

您将看到我正在使用带有饼图的局部视图的索引视图。计划是在索引视图中显示多个部分视图。

我希望有人可以帮我解决这个问题。提前谢谢。

型号：

public byte[] PieChartBytes { get; set; }

public class StatsForPieChart
{
    public string dest { get; set; }
    public long recordCount { get; set; }
}

控制器：

public ActionResult _DisplayPieChart (model.ViewModel model)
{
    ArrayList xSeriesList = new ArrayList();
    ArrayList ySeriesList = new ArrayList();
    foreach (var item in model.statsforPieChart)
    {
        xSeriesList.Add(item.dest);
        sSeriesList.Add(item.recordCount);
    }
    model.PieChartBytes = new Chart(width:800, height:600, theme: ChartThem.Blue)
        .AddTitle("Title")
        .AddLegend()
        .AddSeries(
            name: "Name",
            chartType: "Pie",
            xValue: xSeriesList,
            yValues: ySeriesList)
        .GetBytes("png");
    return PartialView(model);
}

索引视图：

Html.RenderAction("_DisplayPieChart", new { model = Model });

饼图视图：

@{
    //the "Save" code is only used to prove the file bytes have been successfully passed and the image is present in the view:
    string sImagePath = Server.MapPath("~") + "Content\\" + Guid.NewGuid().ToString + ".png"
    WebImage myImage = new WebImage(Model.PieChartBytes);
    myImage.Save(sImagePath);
}
<div class="text-center">
    <img src="@sImagePath" /> //works in debug mode, but gets blocked on web server - not desired solution.
    <img src="@myImage" />  //desired solution, but produces no image.
</div>

Answer 1

如果图像只是一个字节字符串而不是存储在任何地方的服务器上的文件，则需要为这些字节添加前缀：

<img src="data:image/png;base64,@myImage" />

这称为数据URL或数据URI

此外，我不确定你需要在这里使用WebImage。您已经在Chart对象上调用了GetBytes（）。这应该返回可用于显示图像的字节：

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

基于@ Anonymous3521的评论，此代码有效：

控制器：

var base64 = Convert.ToBase64String(Model.PieChartBytes); 
var imgSrc = String.Format("data:image/png;base64,{0}", base64);

查看：

<img src="@imgSrc" />

图表显示的问题

1 个答案: