1

我正在将我的项目从 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 进行缓存，这样就不会在本地存储任何文件？

提前致谢

4

1 回答 1

2

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

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

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

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

  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/*ImageSharp 没有为您的 API 请求提供服务，那么您需要通过在 ServiceStack 之前注册它的中间件处理程序来获得更高的偏好，例如：

app.UseImageSharp();

app.UseServiceStack(new AppHost
{
    AppSettings = new NetCoreAppSettings(Configuration)
});
于 2020-07-23T09:29:07.750 回答