如何用Node服务器以JSON提供public文件夹图片访问路径并获取数据？

一、图片存放位置：必须放public文件夹 #

完全可行，而且这是Node服务器（尤其是用Express框架时）托管静态资源的标准做法。把图片放在public目录下后，服务器可以直接通过URL访问这些图片，你只需要在JSON里返回图片的相对路径（比如/avatars/user-avatar.jpg），前端就能通过这个路径加载图片。

二、具体实现步骤 #

1. 项目结构

先把你的项目目录搭成这样：

your-project/
├── public/
│   └── avatars/  # 专门放头像图片的子目录，也可以直接放public根目录
│       ├── alice.jpg
│       └── bob.jpg
├── server.js      # Node服务器代码
└── index.html     # 前端页面（用来测试fetch）

2. 安装依赖

打开终端，进入项目目录，安装Express框架（快速搭建服务器的首选）：

npm init -y
npm install express

3. 编写Node服务器代码（server.js）

const express = require('express');
const app = express();
const port = 3000;

// 托管public目录下的静态资源，这样访问http://localhost:3000/avatars/alice.jpg就能拿到图片
app.use(express.static('public'));

// 定义返回用户资料的接口
app.get('/api/users', (req, res) => {
  // JSON里的avatar字段直接写public下的相对路径
  const users = [
    {
      id: 1,
      name: 'Alice',
      avatar: '/avatars/alice.jpg',
      email: 'alice@example.com'
    },
    {
      id: 2,
      name: 'Bob',
      avatar: '/avatars/bob.jpg',
      email: 'bob@example.com'
    }
  ];
  res.json(users);
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

4. 前端用fetch获取并渲染数据（index.html）

<!DOCTYPE html>
<html>
<head>
  <title>用户资料测试</title>
</head>
<body>
  <div id="user-list"></div>

  <script>
    // 用fetch请求服务器接口
    fetch('http://localhost:3000/api/users')
      .then(res => res.json())
      .then(users => {
        const userList = document.getElementById('user-list');
        users.forEach(user => {
          const userCard = document.createElement('div');
          userCard.innerHTML = `
            <img src="${user.avatar}" alt="${user.name}的头像" width="100">
            <h3>${user.name}</h3>
            <p>${user.email}</p>
          `;
          userList.appendChild(userCard);
        });
      })
      .catch(err => console.error('请求失败:', err));
  </script>
</body>
</html>

5. 运行测试

1. 启动服务器：node server.js
2. 打开浏览器访问http://localhost:3000/index.html，就能看到带头像的用户列表了。

三、关键说明 #

• 为什么这种方式可行？因为express.static('public')会把public目录设为静态资源根目录，所有以/开头的路径都会去public目录里找对应的文件。比如/avatars/alice.jpg实际对应服务器上的public/avatars/alice.jpg。
• 如果不想用Express，用原生Node的http模块也能实现，但会麻烦很多，需要自己处理静态资源的请求，所以推荐用Express快速搞定。

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