Express.js从URL获取图片并在页面展示的实现方法问询

这种方式会在首页请求时拉取图片，转成Base64格式后传给模板，前端通过指定的img标签展示。

路由代码修改（index.js） #

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

// Node.js 18+内置fetch，低于18版本先执行：npm install node-fetch，再添加const fetch = require('node-fetch');

router.get('/', async function(req, res, next) {
  try {
    // 请求你的图片API
    const imageRes = await fetch("https://myimageapi.com/your-image-path");
    if (!imageRes.ok) throw new Error('图片请求失败');
    
    // 将图片转成Base64格式
    const imageBuffer = await imageRes.arrayBuffer();
    const base64Img = `data:${imageRes.headers.get('content-type')};base64,${Buffer.from(imageBuffer).toString('base64')}`;

    // 把Base64字符串传给模板
    res.render('index', {
      page:'Home', 
      menuId:'home',
      imageData: base64Img
    });
  } catch (err) {
    next(err); // 把错误抛给Express的错误处理中间件
  }
});

前端模板修改（以EJS为例） #

找到<img id="myimage">，设置src为模板变量：

<img id="myimage" src="<%= imageData %>" alt="展示图片">

这种方式性能更优，不会把图片数据塞进页面里，同时完全隐藏真实图片API地址。前端img标签直接指向这个代理路由，由后端转发图片内容。

路由代码修改（index.js） #

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

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

router.get('/image', async function(req, res, next) {
  try {
    // 请求你的图片API
    const imageRes = await fetch("https://myimageapi.com/your-image-path");
    if (!imageRes.ok) throw new Error('图片请求失败');

    // 设置响应的图片类型和原API一致
    res.set('Content-Type', imageRes.headers.get('content-type'));
    // 可选：添加缓存头减少重复请求
    res.set('Cache-Control', 'public, max-age=86400');
    // 直接把图片流转发给前端，不用加载到内存
    imageRes.body.pipe(res);
  } catch (err) {
    next(err);
  }
});

前端模板修改（以EJS为例） #

直接设置img的src为代理路由：

<img src="/image" alt="展示图片">

额外说明 #

• 如果图片API需要认证，在fetch请求里加上对应的请求头，比如：

  const imageRes = await fetch("https://myimageapi.com/your-image-path", {
    headers: {
      'Authorization': 'Bearer YOUR_AUTH_TOKEN'
    }
  });
  

内容的提问来源于stack exchange，提问作者Cory Future