在Angular 2和ASP.NET Core中使用相对图像路径

AJ_

我试图获取本地图像文件的路径,但无法弄清相对路径的位置。通常,我会将它们从wwwroot / images文件夹中删除,但是当我尝试从那里加载它们时会失败。

您在Angular 2中从哪里获得相对路径?我使用generator-aspnetcore-spa创建了应用程序。


https://github.com/aspnet/JavaScriptServices
http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

例如在ClientApp / components / app / app.ts文件夹中。
我将图像文件夹放在哪里,如何命名它的路径?

拉尔夫·伯宁

在里面 Program.cs

public class Program
{
    public static void Main(string[] args)
    {
        var host = new WebHostBuilder()
            .UseKestrel()
            .UseContentRoot(Directory.GetCurrentDirectory())
            .UseIISIntegration()
            .UseStartup<Startup>()
            .Build();

        host.Run();
    }
}

UseContentRoot默认为您的应用程序的当前目录。

通过调用app.UseStaticFiles();Startup类

public class Startup
{
    ...
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        ...
        app.UseStaticFiles();

静态文件中间件已启用。使用默认设置,它将为Web根文件夹(<content root>/wwwroot中的所有文件提供服务

如果查看https://github.com/aspnet/JavaScriptServices Angular2模板,您将在webpack.config.js中看到输出存储在

output: {
    path: path.join(__dirname, 'wwwroot', 'dist'),
    filename: '[name].js',
    publicPath: '/dist/'
},

因此,<content root>/wwwroot/distURL将是

 http://<whatever host and port>/dist/<my file>

该URL不必包含ClientApp(内容根级别,不能由静态文件中间件访问),而必须包含dist(wwwroot级别)。

因此,将您的images文件夹放入...\wwwroot\images,图片URL将为http://<whatever host and port>/images/<my image file>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用ASP.NET Core和Angular2的最佳方法

来自分类Dev

将图像发布到asp.net API 2和angular 2

来自分类Dev

将图像发布到asp.net API 2和angular 2

来自分类Dev

如何为 Angular 2 和 ASP.NET Core MVC 共享环境变量

来自分类Dev

如何在ASP.NET Core MVC和Angular项目中使用Angular Material组件(特别是滑块)?

来自分类Dev

部署angular 8和asp.net core 3.1的步骤

来自分类Dev

ASP.net Core中的加密和Angular中的解密

来自分类Dev

Asp.net Core和Angular 7 Cors

来自分类Dev

Auth0、Angular 4 和 ASP.NET Core

来自分类Dev

与asp.net核心和systemjs安装的angular2

来自分类常见问题

如何避免在Angular 2中使用相对路径较长的导入?

来自分类Dev

如何从 Angular 2 访问 Asp.net Core Api

来自分类Dev

asp.net core 1.1 antiforgery with angular 2/4

来自分类Dev

在 Angular7 ASP .Net Core 2.1 中使用 ng2-file-upload 视频上传失败

来自分类Dev

在ASP.NET MVC 4.0(Angular JS)中使用多个文件控件上载多个图像

来自分类Dev

如何使用 docker 在 asp.net core 中创建 angular 4 应用程序设置的图像

来自分类Dev

如何在 Asp.net mvc 中使用 Angular 插入系统日期和其他数据

来自分类Dev

.NET Core和Angular 2工作流程

来自分类Dev

.NET Core和Angular 2工作流程

来自分类Dev

如何使用Angular和ASP.NET Core 3.1确认电子邮件

来自分类Dev

尝试使用 angular 5 和 asp.net core 从数据库下载文件

来自分类Dev

在asp.net core spas中使用angular cli生成新组件时出错

来自分类Dev

相对路径,可在控制台应用程序和ASP.NET Web应用程序中使用

来自分类Dev

使用 angular cli 和 ASP.Net MVC5 集成 angular 4

来自分类Dev

ASP.NET Core + Angular静态路由

来自分类Dev

我如何使用angular 5和asp.net core从angular向端点发送电子邮件

来自分类Dev

为什么在 ASP.NET 项目中使用 Angular 2?

来自分类Dev

Angular JS 和 ASP.NET MVC

来自分类Dev

使用ASP .Net Core(非MVC)进行Angular 2路由

Related 相关文章

  1. 1

    使用ASP.NET Core和Angular2的最佳方法

  2. 2

    将图像发布到asp.net API 2和angular 2

  3. 3

    将图像发布到asp.net API 2和angular 2

  4. 4

    如何为 Angular 2 和 ASP.NET Core MVC 共享环境变量

  5. 5

    如何在ASP.NET Core MVC和Angular项目中使用Angular Material组件(特别是滑块)?

  6. 6

    部署angular 8和asp.net core 3.1的步骤

  7. 7

    ASP.net Core中的加密和Angular中的解密

  8. 8

    Asp.net Core和Angular 7 Cors

  9. 9

    Auth0、Angular 4 和 ASP.NET Core

  10. 10

    与asp.net核心和systemjs安装的angular2

  11. 11

    如何避免在Angular 2中使用相对路径较长的导入?

  12. 12

    如何从 Angular 2 访问 Asp.net Core Api

  13. 13

    asp.net core 1.1 antiforgery with angular 2/4

  14. 14

    在 Angular7 ASP .Net Core 2.1 中使用 ng2-file-upload 视频上传失败

  15. 15

    在ASP.NET MVC 4.0(Angular JS)中使用多个文件控件上载多个图像

  16. 16

    如何使用 docker 在 asp.net core 中创建 angular 4 应用程序设置的图像

  17. 17

    如何在 Asp.net mvc 中使用 Angular 插入系统日期和其他数据

  18. 18

    .NET Core和Angular 2工作流程

  19. 19

    .NET Core和Angular 2工作流程

  20. 20

    如何使用Angular和ASP.NET Core 3.1确认电子邮件

  21. 21

    尝试使用 angular 5 和 asp.net core 从数据库下载文件

  22. 22

    在asp.net core spas中使用angular cli生成新组件时出错

  23. 23

    相对路径,可在控制台应用程序和ASP.NET Web应用程序中使用

  24. 24

    使用 angular cli 和 ASP.Net MVC5 集成 angular 4

  25. 25

    ASP.NET Core + Angular静态路由

  26. 26

    我如何使用angular 5和asp.net core从angular向端点发送电子邮件

  27. 27

    为什么在 ASP.NET 项目中使用 Angular 2?

  28. 28

    Angular JS 和 ASP.NET MVC

  29. 29

    使用ASP .Net Core(非MVC)进行Angular 2路由

热门标签

归档