Node.js服务器图片无法显示，报Cannot GET /images/pottery1.jpg错误

一、修复图片加载错误（Cannot GET /images/pottery1.jpg） #

1. 使用绝对路径指定静态资源目录 #

直接使用相对路径'public'可能因服务器启动时的工作目录不是项目根目录，导致无法定位到静态资源文件夹。改用__dirname结合path模块生成绝对路径，确保无论在哪里启动服务器都能正确找到public目录：

• 先引入path模块：

  const path = require('path');
  

• 修改静态资源中间件配置：

  app.use(express.static(path.join(__dirname, 'public')));
  

2. 验证HTML中的图片路径 #

确保index.html里的图片引用路径正确，需以/开头（从静态根目录public出发）：

<img src="/images/pottery1.jpg" alt="Pottery 1">

避免使用相对路径（如images/pottery1.jpg），虽然当前index.html位于public根目录时相对路径也能工作，但绝对路径更可靠，能避免页面层级变化引发的路径问题。

二、解决修改index.html后页面无变化的问题 #

1. 强制浏览器刷新缓存 #

浏览器会缓存旧的HTML内容，修改文件后按下Ctrl+F5（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，绕过缓存加载最新文件。

2. 使用自动重启工具（开发环境推荐） #

安装nodemon工具，它会监听文件变化并自动重启Express服务器，确保修改后的静态资源和代码立即生效：

• 全局安装nodemon：

  npm install -g nodemon
  

• 用nodemon启动服务器：

  nodemon server.js
  

3. 禁用开发环境缓存（可选） #

在express.static中配置缓存控制，强制浏览器不缓存静态资源（仅开发环境使用，生产环境请勿开启）：

app.use(express.static(path.join(__dirname, 'public'), {
  maxAge: 0, // 禁用缓存
  etag: false
}));

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