如何使用 Angular 10 img 标签中的绝对路径在 nodejs 服务器中提供静态图像？

Question

我一直在这里搜索并没有找到解决方案，所以我在问。 如何提供位于 nodejs 服务器中的静态图像：

public/img

Nodejs（在 app.listen() 之前）：

app.use("/api", routesIndex);
app.use(express.static(__dirname + '/public/img'));

Angular 10 模板：

<img class="center" [src]="quizService.rootUrl+'/public/img/'+quizService.questions[quizService.questionProgress].imageName+'.jpg'">

[src] 解析为绝对正确的路径：

http://localhost:5000/api/public/img/shark.jpg

但它仍然显示404。 有任何想法吗？

谢谢

Answer 1

无需添加静态服务目录的路径。 只需删除'/public/img/'

<img class="center" [src]="quizService.rootUrl + quizService.questions[quizService.questionProgress].imageName+'.jpg'">

您可以直接访问服务目录的所有文件。 喜欢：

http://localhost:5000/shark.jpg

Answer 2

按照以下步骤，

your image is at path Public/img/shark.jpg

在你的 app.js 中，这应该在创建任何路由之前

app.use(express.static(__dirname + '/public/img'));

创建如下路线

app.get('/Image/:id', function (req, res) {
    // logic to find image based on id passed, we will assume it results in shark.jpg
    const filepath = `${__dirname}/public/img/shark.jpg`;
    res.sendFile(filepath);
});

现在从你的角度代码使用这个端点

localhost:{PORT_NUMBER}/Image/{ID_FOR_SHARK_IMAGE}

Answer 3

我通过执行以下操作使其工作：

Nodejs添加路径：

const path = require("path");

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

然后在 Angular 中创建了一个单独的 assetUrl，它省略了 baseUrl 的“/api”部分：

[src]="quizService.assetUrl+'/'+quizService.questions[quizService.questionProgress].imageName+'.jpg'"

现在我的图像已送达。