正文 

当前位置： 首页 > 问答 >

如何在 NestJS 中提供静态图像

     2023-03-10     266

关键词：

【中文标题】如何在 NestJS 中提供静态图像【英文标题】：How to serve static images in NestJS 【发布时间】：2020-12-05 07:44:06 【问题描述】：

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

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

我尝试了所有在互联网上找到的，例如：

main.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 路由？

谢谢大家。

【问题讨论】：

鉴于这样的配置（看起来不错），您能否分享您的静态文件夹 public 目录结构和您尝试过的一些静态资产的简单 GET？ 嗨，我有这个结构：project/resources /tmp /files project/public（只是为了尝试这个名称，因为在示例中更常见）我的 GET 请求放在浏览器中localhost:3000/resources/a.jpg 或公用文件夹。如果您需要其他事情，请告诉我。非常感谢 但是，您将 rootPath 配置如下：rootPath: join(__dirname, '..', 'public')? 尝试将您的a.jpg 放入project/public 并通过localhost:3000/a.jpg 获取它 rootPath: join(__dirname, '..', 'public')?在原始问题的第二个文件中，我尝试了这个请求，它返回了一个 404 路由，firefox 找不到 【参考方案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'),
         ),
     ],
 )

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

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

【讨论】：

我已经这样做了，但是有这个错误“ENOENT：没有这样的文件或目录”它是显示文件在 \dist\public\index.html 中找不到【参考方案2】：

使用useStaticAssets() 方法（ServeStaticModule 用于提供静态内容，例如 SPA）。 因此，作为一个最小示例，您的 main.ts 应如下所示）：

async function bootstrap() 
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets(join(__dirname, '..', 'public'));
  await app.listen(3000);

在上面的示例中，您的资产是从应用程序的根目录提供的（例如 http://localhost:3000/example.png。

您还可以将选项传递给方法，以配置提供资产的路径：

  app.useStaticAssets(join(__dirname, '..', 'public'), 
    prefix: '/public/',
  );

在此示例中，您的路径以 public 为前缀（例如 http://localhost:3000/public/example.png）

【讨论】：

【参考方案3】：

在NestJs 中提供静态内容有两种方式。使用1 或2。

1.在app.module.ts

中使用ServeStaticModule 
import  Module  from '@nestjs/common';
import  ServeStaticModule  from '@nestjs/serve-static';
import  join  from 'path';
import  mainModule  from 'process'    
@Module(
  imports: [
    ServeStaticModule.forRoot(
      rootPath: join(__dirname, '..', 'public'),
    ),
  ],
)
export class AppModule

2.在 ma​​in.ts 中使用NestExpressApplication [即使默认情况下 Nest Js 仅使用 Express ]

import  NestFactory  from '@nestjs/core';
import  NestExpressApplication  from '@nestjs/platform-express';
import  join  from 'path';
import  AppModule  from './app.module';

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

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

  await app.listen(3000);

bootstrap();

【讨论】：

【参考方案4】：

将此添加到 main.ts 用您的目录名称替换“上传” app.use('/uploads',express.static(join(process.cwd(), 'uploads')));

【讨论】：

您能编辑一下并解释原因吗？在这种情况下，这也将有助于其他人发现这个问题，因为最初的提问者很可能在 10 个月后已经解决了这个问题；）【参考方案5】：

@pzabrocki 的想法让我想到了以下最小的工作存储库：https://gitlab.com/hadrien-toma/nest-static-files

玩它：

git clone https://gitlab.com/hadrien-toma/nest-static-files
yarn install
yarn run start

然后my-file.json 服务于http://localhost:3333/my-file.json。

【讨论】：

【参考方案6】：

你也可以在nest js中使用express静态模块。

// ...imports
import * as express from 'express';
import  join  from 'path';

async function bootstrap() 
    const app = await NestFactory.create(AppModule);
  
    // serve static assets from the client/dist folder, change this to the correct path for your project
    app.use(express.static(join(process.cwd(), '../client/dist/')));
  
    //... you config

   await app.listen(process.env.PORT);
 
bootstrap();

感谢：https://whatthecode.dev/serve-static-files-with-nest-js/

【讨论】：

如何在nestjs中动态连接数据库？

】如何在nestjs中动态连接数据库？【英文标题】：Howtodynamicallyconnecttoadatabaseinnestjs?【发布时间】：2021-01-2200:36:25【问题描述】：我有多个要连接的数据库。但其中只有一个具有静态名称。例如，该数据库的名称是stores，其中我... 查看详情

如何使用 Jest 在 NestJS 的提供者中模拟和监视“mongoose.connect”

】如何使用Jest在NestJS的提供者中模拟和监视“mongoose.connect”【英文标题】：HowtouseJesttomockandspya`mongoose.connect`inaproviderofNestJS【发布时间】：2020-11-0414:10:12【问题描述】：我定义了一个特定于数据库的自定义Module以通过MongooseAPI连... 查看详情

如何使用角度和 Spring MVC 提供静态图像？

】如何使用角度和SpringMVC提供静态图像？【英文标题】：HowtoserveanstaticimageusingangularandSpringMVC?【发布时间】：2018-06-2504:26:17【问题描述】：现在我创建了文件上传组件并将上传的文件保存在硬盘的物理路径中。那么，现在如何使... 查看详情

如何动态更改 Mongoose 提供程序中的集合或数据库的名称，Nestjs？

】如何动态更改Mongoose提供程序中的集合或数据库的名称，Nestjs？【英文标题】：HowtochangethenameofacollectionordbinaMongooseproviderdynamically,Nestjs?【发布时间】：2019-08-2212:01:19【问题描述】：我需要更改我的查询在Nestjs应用中指向的位置... 查看详情

如何在 Nestjs 中创建 mongodb 连接提供程序

】如何在Nestjs中创建mongodb连接提供程序【英文标题】：HowtocreateamongodbconnectionproviderinNestjs【发布时间】：2020-06-0607:34:35【问题描述】：我正在尝试在Nestjs中为MongoDB创建一个数据库连接提供程序。我通过放置断点检查了user.controll... 查看详情

在 Nestjs 的文件系统中保存文件

...我的MySQL数据库中。我关注了文档，但我真的不知道应该如何在服务器文件系统中保存图像并将URL返回给客户端。这是我的代码：@ApiTags(\'product-image\')@Co 查看详情

如何在 Django 的“main.css”中提供图像路径？

】如何在Django的“main.css”中提供图像路径？【英文标题】：Howtoprovideimagepathin"main.css"inDjango?【发布时间】：2020-09-1320:46:45【问题描述】：我正在尝试在Django中构建一个应用程序，我已经创建了一个主页，我为项目设置的... 查看详情

单元测试时如何在nestjs中为服务提供注入常量

】单元测试时如何在nestjs中为服务提供注入常量【英文标题】：HowtoprovideInjectedconstanttoserviceinnestjswhenunittesting【发布时间】：2019-03-0101:30:56【问题描述】：我尝试为我的小型应用程序创建单元测试。我想测试一个使用注入配置和... 查看详情

如何使用 Iron 路由器提供静态内容（图像、字体等）

】如何使用Iron路由器提供静态内容（图像、字体等）【英文标题】：Howtoservestaticcontent(images,fontsetc.)usingironrouter【发布时间】：2014-02-1522:56:32【问题描述】：我刚开始在流星上使用铁路由器。我需要在主页上显示图像。我能够使... 查看详情

在 NestJS Jest 测试中覆盖提供程序

】在NestJSJest测试中覆盖提供程序【英文标题】：OverridingprovidersinNestJSJesttests【发布时间】：2019-02-0507:03:59【问题描述】：我想在我的NestJS应用程序中使用内存中的Mongo实例来模拟数据以进行测试。我有一个数据库提供程序，它使... 查看详情

如何在 Angular 中提供 JSON？

】如何在Angular中提供JSON？【英文标题】：HowdoIserveJSONinAngular?【发布时间】：2017-12-1605:27:48【问题描述】：我有一个使用Webpack构建的Angular4应用程序，我正在尝试提供一个JSON文件。两个问题：在最简单的情况下，JSON文件是静态... 查看详情

如何测试 Nestjs 拦截器？

】如何测试Nestjs拦截器？【英文标题】：HowtotestNestjsinterceptor?【发布时间】：2020-01-0321:47:00【问题描述】：我找不到任何关于如何在NestJS中测试拦截器的解释这个简单的例子截取了一个POST查询以向正文中提供的示例模型添加一... 查看详情

NestJS WebSocketGateway 未初始化

】NestJSWebSocketGateway未初始化【英文标题】：NestJSWebSocketGatewaydoesnotinitialize【发布时间】：2019-09-0400:40:57【问题描述】：根据NestJS文档，我已经实现了websockets网关，并在AppModule中提供了它。服务器正常启动，我可以通过http成功提... 查看详情

如何使用 NestJS 提供服务器端分页？

】如何使用NestJS提供服务器端分页？【英文标题】：Howtoprovideserver-sidepaginationwithNestJS?【发布时间】：2021-04-1612:45:44【问题描述】：给定一个使用Nestjs、MongoDB(mongoose)的MEVN堆栈，我正在努力设置服务器端分页。我的方法是使用mong... 查看详情

如何在 Svelte 中使用本地静态图像

】如何在Svelte中使用本地静态图像【英文标题】：HowtouselocalstaticimagesinSvelte【发布时间】：2019-11-1515:55:19【问题描述】：我正在按照教程(https://svelte.dev/tutorial/dynamic-attributes)导入本地图像文件。但它没有用。在应用程序中找不到... 查看详情

NestJS：如何从同一个模块将服务注入提供者？

】NestJS：如何从同一个模块将服务注入提供者？【英文标题】：NestJS:Howtoinjectaserviceintoaproviderfromthesamemodule?【发布时间】：2020-07-1821:38:00【问题描述】：是否可以从同一模块将服务注入工厂提供程序？我有一个服务AppService，我... 查看详情

节点 JS 不提供静态图像

】节点JS不提供静态图像【英文标题】：NodeJSnotservingthestaticimage【发布时间】：2017-04-1118:22:19【问题描述】：我已经添加了用于在我的节点服务器上提供图像的代码，但是在连接到Node.js时它似乎没有在HTML中提供图像。我也有正... 查看详情

如何解决在 NestJs 应用程序中应该是 Injectable 类的未实例化属性？

】如何解决在NestJs应用程序中应该是Injectable类的未实例化属性？【英文标题】：Howtosolveun-instantiatedpropertythatshouldbeanInjectableclassinNestJsapplication?【发布时间】：2021-06-2309:36:47【问题描述】：该项目有两个模块，其中：UserModule处理... 查看详情