title: nodejs serve blob(base64) as image
body: <p>I know there's two other similar questions, but mine just isn't working and I'm not sure why.</p>
  <p>I'm trying to serve a blob image saved in base64 on a nodejs server.</p>
  <p>It's just not serving and I have no clue why. If I comment out the &quot;writeHead&quot; part it shows the base64 like it should. I've tried it with <code>data:image/jpeg</code> and without. I've also tried converting it to a buffer. Just can't seem to figure it out.</p>
  <p>The base64 image is less than 200 kb and is saved in a mediumblob</p>
  <p>Can anyone see what I'm doing wrong</p>
  <pre><code>app.get(&quot;/f/:id&quot;, async function(req, res) {
    r = await Files.get(req);
    if(r.err.code){
      console.log(&quot;error&quot;,r);
    }
    var file = r.res.file;
  
    res.writeHead(200, {
      'Content-Type': 'image/png',
      'Content-Length': file.length
    });
    res.end(file);
  });
  </code></pre>
  <p>Here's what it looks like in the browser
  <a href="https://i.stack.imgur.com/iwqa9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iwqa9.png" alt="Here's what it looks like in the browser" /></a>
  Here's what it looks like without writeHead enabled
  <a href="https://i.stack.imgur.com/Zjgpd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zjgpd.jpg" alt="Here's what it looks like without writeHead enabled" /></a></p>
  <p>Note: the &quot;viewPortSize&quot; id element at the bottom is an extension.</p>
  <p>Edit #1: Also on Firefox it says &quot;the image cannot be displayed because of errors&quot;
  This must mean I've encoded it into base64 incorrectly right?</p>
  <p>Edit #3: Actually it is saved correctly because if I remove headers and display it as html with an img and src it shows the image properly..now I really don't know what the issue is.</p>
  <p><a href="https://i.stack.imgur.com/HEghh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HEghh.png" alt="firefox error" /></a></p>
  <p>Edit #2:Here's the app.js setup</p>
  <pre><code>// ==============================================
  // Base setup
  // ==============================================
  
  process.env.TZ = &quot;Etc/GMT&quot;
  
  const express     = require('express');
  const session     = require('express-session');
  const app         = express();
  const port        = 3075;
  const bodyParser  = require('body-parser');
  
  app.use(bodyParser.urlencoded({limit: '50mb', extended: true }));
  app.use(bodyParser.json({limit: '50mb'}));
  
  app.use(require('express-useragent').express());
  app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: true }
  }))
  
  // Cors
  app.use(async function(req, res, next) {
  
    let allowOrigins = [
      // removed for SO
    ];
  
    if(Config.Env === Environments.Local){
      res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;);
      req.session.language = req.query.lg;
    }else{
      res.header(&quot;Access-Control-Allow-Origin&quot;, Config.FrontEnd.Url);
      var origin = req.get('origin');
      for (let i = 0; i &lt; allowOrigins.length; i++) {
        const allowOrigin = allowOrigins[i];
        if(origin.match(allowOrigin)){
          res.header(&quot;Access-Control-Allow-Origin&quot;, origin);
        }
      }
  
      var subdomain = origin.split('.')[0];
      for (let j = 0; j &lt; availableLanguages.length; j++) {
        const lang = availableLanguages[j];
        if(lang.code === subdomain){
          req.session.language = lang.code;
          break;
        }    
      }
    }
  
    // if(Config.Env !== Environments.Local){
      if(req.session.language !== undefined &amp;&amp; req.session.language !== &quot;en&quot;){
        Config.FrontEnd.Url = Config.FrontEnd.Url.replace(&quot;://&quot;, &quot;://&quot;+req.session.language+&quot;.&quot;);
      }
    // }
  
  
    res.header(&quot;Access-Control-Allow-Headers&quot;, &quot;Origin, X-Requested-With, Content-Type, Accept, auth-id, auth-token, x-csrf-token, _csrf&quot;);
    res.header('Access-Control-Allow-Methods', 'PATCH, POST, GET, DELETE, OPTIONS');
    next();
  });
  </code></pre>
  <p>Edit #4: If I send it like this(with the data part on it) , the image shows like it should. However the headers are not of an image. (if I change to image it goes back to the black screen)</p>
  <pre><code>app.get(&quot;/f/:id&quot;, async function(req, res) {
    r = await Files.get(req);
    if(r.err.code){
      console.log(&quot;error&quot;,r);
    }
    var file = r.res.file;
  
    res.end(
      '&lt;html&gt;'+
        '&lt;head&gt;&lt;/head&gt;'+
        '&lt;body&gt;'+
            '&lt;img src=&quot;'+file+'&quot;&gt;'+
        '&lt;/body&gt;'+
      '&lt;/html&gt;'
    );
  });
  </code></pre>