expressjs - 从 url 获取图像并将其显示在页面上

Question

I have an image API running from a home server, and I'm building a cloud-hosted page that grabs the image in backend and shows it, for a layer of abstraction.

Here's what I'm trying to do:

index.js

var express = require('express');
var router = express.Router();


router.get('/', function(req, res, next) {
     // some logic to grab the image and pass it to the HTML page
     // var image = fetch("myimageapi.com") 
     // ?????
  res.render('index', {page:'Home', menuId:'home'});
});

and display it with <img id="myimage">

Or maybe it would be better to:

router.get('/', function(req, res, next) {         
  res.render('index', {page:'Home', menuId:'home'});
});
router.get('/image', function(req, res, next) {
     //fetch image
});

and <img src="mywebsite.com/image>

I really have no idea how one would go about doing this in node, I am coming from python and this is all very scary

Answer 1

I solved it, just had to come back with a fresh brain:

app.get('/', (req, res) => {
    res.render("index")
})

app.get('/image', async (req, res) => {
    const url = 'example.com/image.png';
  
    request({
      url: url,
      encoding: null
    }, 
    (err, resp, buffer) => {
      if (!err && resp.statusCode === 200){
        res.set("Content-Type", "image/jpeg");
        res.send(resp.body);
      }
    });
});

In index.ejs: <image src='/image'> calls the image route and pulls the image as if it were a static file. I feel like it would be cleaner to pass it directly to the page, but this solution works so I'm running with it.