如何在 NestJS 中提供静态图片

Question

我开始学习 MEAN 堆栈，当我去 Express 时，我看到 express 框架中存在一个额外的层，称为 NestJS。它拥有我想要的一切，而且它具有类似 Angular 的语法，因此对我来说是完美的。

但是每一个新步骤都是一场噩梦文档根本没有用。现在我正在与框架作斗争以实现提供图像并且不使用 API 进行此类调用。

我尝试了在 Internet 上找到的所有内容，例如：

主.ts

 import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as bodyParser from 'body-parser';
import * as express from 'express';
import { join } from 'path';

import { NestExpressApplication } from '@nestjs/platform-express';

declare const module: any;

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, '..', 'public'));

  app.enableCors({
    origin: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    credentials: true,
  });

//I tried this 2 options (https://docs.nestjs.com/techniques/mvc) (https://whatthecode.dev/serve-static-files-with-nest-js/)
  app.use('/resources', express.static(process.cwd() + '\\resources'));
  app.useStaticAssets(join(__dirname, '..', '\\public'));

  app.use(bodyParser.json({ limit: '50mb' }));
  app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));

  //console.log(process.cwd());

  await app.listen(3000);

  if (module.hot) {
    module.hot.accept();
    module.hot.dispose(() => app.close());
  }

}
bootstrap();

我试着把它放在 app.module 中（它有效但总是在寻找 index.html 而不是图像）：

import { AnimalsModule } from './animals/animals.module';
import { SpeciesModule } from './species/species.module';
import { AuthModule } from './auth/auth.module';
import { UsersModule } from './users/users.module';
import { BreedModule } from './breed/breed.module';
import { StateModule } from './state/state.module';
import { PhotoModule } from './photo/photo.module';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'),   // <-- path to the static files
    }),
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: '',
      database: 'nest',
      entities: [__dirname + '/**/*.entity{.ts,.js}'],
      synchronize: true,
    }),
    AnimalsModule,
    SpeciesModule,
    BreedModule,
    StateModule,
    AuthModule,
    UsersModule,
    PhotoModule,
  ],
})

//It seems that ignores this register and just uses the method signature options
@Module({
  imports: [MulterModule.register({
    dest: './resources/tmp',
    limits: { fieldSize: 25 * 1024 * 1024 * 1024, fileSize: 25 * 1024 * 1024 * 1024 }
  })],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }

我到底怎么才能提供图像或文件并避免 api 路由？

谢谢大家。

原文由 Guille 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这就是我所做的：

1. 在 app.module.ts 中

    import { ServeStaticModule } from '@nestjs/serve-static/dist/serve-static.module';
    import { join } from 'path';

    @Module({
        imports: [
            ServeStaticModule.forRoot({
                rootPath: join(__dirname, '..', 'public'),
            }),
        ],
    })

1. 然后我在与“src”、“dir”等相同的级别上创建了“public”目录。

2. 该文件位于：https://my-url/file.jpg

原文由 pzabrocki 发布，翻译遵循 CC BY-SA 4.0 许可协议