Node.js Express中res.render向Pug传图片URL加载失败解决方案

你的原方案思路完全可行，图片加载失败基本是静态资源配置、路径写法、模板语法三类问题，按以下步骤调整即可，全程不需要写任何客户端JavaScript：

第一步：配置Express静态资源目录 #

这是图片加载失败最常见的漏配项，必须在所有路由定义前，将存放静态资源的public目录挂载到Express服务上，否则服务不会主动返回public下的文件：

// app.js 顶部配置
const express = require('express');
const app = express();
// 关键配置：public目录下的文件可通过http路径直接访问
app.use(express.static('public'));

注意：挂载后public目录不会出现在访问路径里，比如public/images/1.png对应的访问地址是/images/1.png，不要在路径里加/public前缀，否则会报404。

第二步：修正工具方法的返回值 #

调整transformNumber.js里的两个方法，其中图片路径必须返回上一步提到的HTTP可访问绝对路径，不要返回本地文件系统的相对路径：

// transformNumber.js
function numberToText(num) {
  // 按业务需求补全数字和文本的映射
  const textMap = {
    0: '零',
    1: '一',
    2: '二'
  };
  return textMap[num] ?? '无效数字';
}

function numberToImage(num) {
  // 按实际图片文件名补全映射，路径必须以/images/开头
  const imgMap = {
    0: '/images/icon-0.png',
    1: '/images/icon-1.png',
    2: '/images/icon-2.png'
  };
  return imgMap[num] ?? '/images/default.png';
}

module.exports = { numberToText, numberToImage };

第三步：路由层传参逻辑 #

处理请求时拿到用户传入的数字，转成数值类型后调用两个工具方法，将结果传给模板即可：

// app.js 路由示例
const { numberToText, numberToImage } = require('./transformNumber');
// 处理POST表单提交的数字
app.post('/result', express.urlencoded({ extended: false }), (req, res) => {
  const inputNum = Number(req.body.number); // 转成数值类型避免映射匹配失败
  res.render('page1', {
    resultText: numberToText(inputNum),
    resultImg: numberToImage(inputNum)
  });
});

// 如果是GET传参的场景参考以下写法
app.get('/result', (req, res) => {
  const inputNum = Number(req.query.number);
  res.render('page1', {
    resultText: numberToText(inputNum),
    resultImg: numberToImage(inputNum)
  });
});

第四步：修正Pug模板语法 #

你之前用的src="#{imgURL}"是旧版Jade的过时插值写法，新版Pug绑定属性直接传变量即可，不要把图片地址放到p标签里（只会显示文本不会渲染图片），正确写法：

//- page1.pug
doctype html
html(lang="zh-CN")
  head
    meta(charset="UTF-8")
    title 转换结果
  body
    //- 渲染转换后的文本，*包裹是强调效果
    p 转换结果：*#{resultText}*
    //- 绑定图片地址，直接给src属性赋变量
    img(src=resultImg, alt="对应图标")

常见踩坑点 #

• 未配置express.static挂载public目录，所有图片请求返回404
• 图片路径错误，多写了/public前缀，或者用了./public/xxx这类本地相对路径，浏览器无法识别
• Pug语法错误：用过时的插值格式绑定属性，或者把图片地址放在普通文本标签里而非img标签
• 未将用户传入的参数转成数值类型，导致映射表匹配失败，给img传了undefined路径

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