Showing an image blob in MVC2_问答_开发者_运维开发者技术经验分享

I'm trying (without success) to fetch a blob image from a service and show it as an image in html.

my html is:

<img src="<%: Url.Action("GetPersonImage", new { pid = Model.PersonId }) %>" alt="" />

witch shows in the Source as

<img src="/demo4/ABook/GetPersonImage/?pid=210092" alt="">

my action is:

    public void GetPersonImage(int pid)
    {
        string src = so.GetPersonImage(pid);
        byte[] bytes = System.Text.Encoding.UTF8.GetBytes(src);

        Response.Clear();
        Response.AddHeader("Content-Length", src.Length.ToString());
        Response.ContentType = "image/gif";
        Response.BufferOutput = false;
        Response.BinaryWrite(bytes);
        Response.End();
    }

and this shows nothing in the page if I access to

http://localhost:60556/demo4/ABook/GetPersonImage/?pid=210092

I even tried with FileStreamResult

    public FileStreamResult GetPersonImage(int pid)
    {
        string src = so.GetPersonImage(pid);

        Response.Clear();
        Response.Expires = 0;
        Response.AddHeader("Content-Length", src.Length.ToString());
        Response.BufferOutput = false;

        return new FileStreamResult(
                        new System.IO.MemoryStream(
                            System.Text.Encoding.UTF8.GetBytes(src)), "image/gif");
    }

and still nothing :(

the src variable contains

iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQAEAAAIAAIAAAACAAcAAAIAAAAPAAAZAABABgAsAAAnAAA/BgU4AQREBgBKCQpIExMAAB0AACQAACImABI1ABdKCSMyAB9DBSwYADcnAEUOAEYlAEA1CRMREiUjJCU/DjQNFEpTKjc1Nks5UUlHSAAATwAAUgACVgAATQECTgADVQARYQAgbQAkcQAUZgAYZwAebAAkcwArdwAueQAxfAA3gQAtegA2gAA4gwA8hgA+hwAseQAzfQA5hABFiwAHWgALXAARYAAGWAAKXAIHVwIXZAAYaABCjABJkQBLkA0KTRAPVRMXYgwbaBkTTSAcWiYcTyEgZRMncCQpbQ41ehs0eixMizIoTy8oXz40Y0AwUExCaE5HbzU2eEZJggBODgBXHQBjFgBgIABQDABlFgBiKwB7HwBiFQBtOhN3RyWCVwBPlQBUmQBanQBgoQBhpABnqABTlgBeoABsqgBzrwBvrAB4sQN8tQ1/uBp/txeHvTNYkziKZVdZjkuXdV6hgh10qyGNwCyTwjWYxkCdyjtknkNwpkt7r1KIuFuTwEmizFOn0F6r01QXAFEeAFwbAGMkAGgrA28zC3U6DmJNIG42EVhEUWVNUXJXUntCG4RLIoFRL4dNHI5YLlxQbGxoQZRdKpRhOH9fUotoVI9iQ5RsVJdwVaBqN6VxO55sQ6d5TKB2VKR7U6J7Xq+CV69/XbGFVK6EXriITraNYb6PVcWaZFpYWW1gcGZpmIKkjYd0e5x6Y5aCf5GPkJ2diaKionZ6pIeJrpiZuaiqxW+skXmpkIK1oGur02iy13K525S/r6fLvaJ+ZKmFa6qMeLaZh76Va8aedsafgbafjMClksmfa8ylcM+nd8+qgcywl8q1ptOsfdKuhtWxgde0itu4jNCyjtK3mN69ktm9m9TAq9nFrt/AleHCmuLJp7W1tcu/tbm8z8rJ2rnVzMHTyc3e2dTEud3RyeTQt+bVwObbzeLg39vb5d7q6Onv8+fg2uvq7u/19/Hu6/7+/gAAAAAAADLRNusAAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAQhElEQVR4Xu1ae3gU1RWHVcC2Sl/WPuhbs9wQI1SWaghUA1tIBIsN9UnDSqtRJI8+1bZQi7YIynpn2AadXVeNTWJ3a1KaTIxfhBqwAmnDsiGrrKAbCmWTAtZNCNpks9/Xc++d2Z2Z3Z2ZQNR/ej4fyczsnN/9nd953LuZkPiQbcKH7D/xfwDjzcDIrnVlaHmH+cCOL4B31yE0o/R6hJabRjCeAIj70oc7Ozs3zUCmORhHAB12VLoR3INtRHazFIwbgJEyZCer3/vQfT+qrl6ITplEMF4ATtnRjXs6OzffD97BZqGTKgD/zQpnnADssqPfwervp97BCj9gALvQDIj+g2z1xBZ9sCEA/5s6N9+bdF9dbX2/RLhr5XJ72Tp1fBPUv2L51dXz0TqTGszWC06dJKZV8shyxKzsXcX7T9lnbNp7n2L51ZVWjQR00GQQ4bs7yyQ/4OlFJYjlyL5hT+eeDXZkT10m/h/9mdJ/dREqM0tAOgMnmXd7aWmpnf60tGNEelsHuh4yDWxPaQrByP开发者_JS百科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

What am I missing?

Your string contains base64 data, not UTF8 characters, so you need to use Convert.FromBase64String. Also, the Content-Length should be the length of the binary data, not the length of the string.

public FileStreamResult GetPersonImage(int pid)
{
    string src = so.GetPersonImage(pid);
    byte[] imageBytes = Convert.FromBase64String(src);
    MemoryStream ms = new MemoryStream(imageBytes);

    Response.Clear();
    Response.Expires = 0;
    Response.AddHeader("Content-Length", imageBytes.Length.ToString());
    Response.BufferOutput = false;

    return new FileStreamResult(ms, "image/png");
}