ServiceStack Nuxt.js SPA 和 ImageSharp.Web 集成

Question

我正在将我的项目从 Asp.Net MVC 迁移到 ServiceStack Nuxt.js SPA，我在 MVC 上使用的一件事是 ImageProcessor.Web 动态处理图像

我现在正尝试在 ServiceStack Nuxt.js 模板上使用 ImageSharp.Web 和 Azure blob。

我在 ConfigureServices 中注册了服务

  services.AddImageSharp()
                .SetRequestParser<QueryCollectionRequestParser>()
                .Configure<AzureBlobStorageImageProviderOptions>(options =>
                {
                    // The "BlobContainers" collection allows registration of multiple containers.
                    options.BlobContainers.Add(new AzureBlobContainerClientOptions
                    {
                        ConnectionString = "DefaultEndpointsProtocol=https;AccountName=storage1;AccountKey=*****;EndpointSuffix=core.windows.net",
                        ContainerName = "blob"
                    });
                })
                .SetCache<PhysicalFileSystemCache>()
                .SetCacheHash<CacheHash>()
                .AddProvider<AzureBlobStorageImageProvider>()
                .AddProcessor<ResizeWebProcessor>()
                .AddProcessor<FormatWebProcessor>()
                .AddProcessor<BackgroundColorWebProcessor>();

并且也在配置中

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }


        app.UseServiceStack(new AppHost
        {
            AppSettings = new NetCoreAppSettings(Configuration)
        });


        app.UseImageSharp();

但是我无法获取图像

http://localhost:3000/blob/media/picture.jpg

如何启用 ImageSharp.Web 在这种情况下拦截对 /blob 路由的调用？

是否也可以使用 Azure blob 进行缓存，这样就不会在本地存储任何文件？

提前致谢

Answer 1

在 ServiceStack 的 vue-nuxt 模板中，nuxt Webpack 开发服务器在 http://localhost:3000 上运行，代理 API 对 ASP.NET 核心服务器的请求在 https:/ 上运行/localhost:5001.

因此，要确保您的 /blob 路由是否正常工作，首先检查它是否可以从您的 ASP.NET 核心服务器访问，例如：

https://localhost:5001/blob/media/picture.jpg

如果是，您需要在 nuxt.config.js 中注册一个额外的开发代理路由，以将所有 /blob/* 请求转发到您的 ASP.NET 核心服务器，例如：

  proxy: {
    '/json': {
      target: 'https://localhost:5001/',
      secure: false
    },
    '/auth': {
      target: 'https://localhost:5001/',
      secure: false
    },
    '/metadata': {
      target: 'https://localhost:5001/',
      secure: false
    },
    '/css': {
      target: 'https://localhost:5001/',
      secure: false
    },
    '/blob': {
      target: 'https://localhost:5001/',
      secure: false
    },
  },

如果您的 https://localhost:5001/blob/* API 请求未由 ImageSharp 提供服务，那么您需要在 ServiceStack 之前注册它的中间件处理程序以获得更高的优先级，例如：

app.UseImageSharp();

app.UseServiceStack(new AppHost
{
    AppSettings = new NetCoreAppSettings(Configuration)
});

ServiceStack Nuxt.js SPA 和 ImageSharp.Web 集成

ServiceStack Nuxt.js SPA and ImageSharp.Web integration

servicestack

asp.net-core

imagesharp