Express.js 在动态路由上提供 Static 文件

Question

I have the following app.js code;

app.use(express.static(__dirname + "/public"));
app.use("/example", express.static(__dirname + "/public"));

app.engine("html", require("ejs").renderFile);

app.get("/", (req, res) => res.render("index.ejs"));
app.get("/example", (req, res) => res.render("example.ejs"));

app.get("/example/:id", (req, res) =>
  res.render("exampleView.ejs", {
    id: req.params.id,
  })
);

and in my exampleView.ejs file, if I use the following image tag it works

<img src="/SampleImage.jpg">

However, if I use it without / it won't work. Using it is not an option because it breaks the other included view files.

I suspect the second line is the issue so I've tried following alternatives,

app.get("/example", (req, res) => res.render("example.ejs"));
app.get("/example/*", (req, res) => res.render("/example.ejs"));
app.get("/example", (req, res) => res.render("/*/example.ejs"));

but still no good.

Answer 1

<img src="SampleImage.jpg">

Will try to find the image in current route, which is in your case '/example/SampleImage.jpg', whereas the image resides inside '/SampleImage.jpg'.

app.get("/example/:id", ()=>{}) 

Will force all files to be inside /example/... . If you want dynamic redirection to that path, you can code like this:

app.use('*.jpg', (req, res, next) => {
    const subRoutes = req.path.split('/')
    const imageFileName = subRoutes[subRoutes.length - 1]
    res.redirect(`/${imageFileName}`)
})

app.use("/example", express.static(__dirname + "/public"))

You can remove this line