NestJS 和 Handlebars 不显示图像答案

【问题标题】：NestJS and Handlebars are not showing imagesNestJS 和 Handlebars 不显示图像
【发布时间】：2022-08-12 00:47:25
【问题描述】：

我正在尝试在用于电子邮件的车把模板中使用图像。唯一的问题是图像没有显示。我尝试了几种方法来解决这个问题，但没有任何帮助。

main.ts 配置：

app.useStaticAssets(join(__dirname, \'..\', \'src\', \'static\'))
app.setBaseViewsDir(join(__dirname, \'..\', \'src\', \'static\', \'templates\'))
app.setViewEngine(\'hbs\')

文件夹结构：

-src
--static
---img
----image1.png
----image2.png
---templates
----email1.hbs
----email2.hbs

如何在模板中使用图像：

<img src=\"/static/img/logo.png\" alt=\"logo\">

在电子邮件中，它看起来像这样：

https://ci4.googleusercontent.com/proxy/IhSgHQ3zXQ7Wh6MMxDAzkCjjFuvjZF3OI_Ru5CEQg3dGnin7xXJdUfjVTIg8Ag=s0-d-e1-ft#http:///static/img/logo.png

从输出源字符串末尾的http:///static/img/logo.png 来看，您需要在URL 中包含主机名，如www.example.com/static/img/logo.png。

标签： handlebars.js nestjs

【解决方案1】：

参考Nest.js official documentation，首先安装hbs模块，然后根据下面的代码设置App模块，访问你的静态文件，如下面代码的第二部分。

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'static'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

在模板中使用静态文件：

<div>
    <img src='/img/image1.png' alt='' />
</div>

从 src 目录中取出静态目录并把它放在它旁边：

-src
-static
--img
---image1.png
---image2.png
--templates
---email1.hbs
---email2.hbs

【讨论】：