构建用于生产的角度应用程序时未加载图像答案

【问题标题】：Images not loading when building angular application for production构建用于生产的角度应用程序时未加载图像
【发布时间】：2020-07-11 03:29:16
【问题描述】：

所以我有一个 Angular 应用程序，在本地服务时可以正常工作并且所有图像都可以正确加载。但是，当我使用 ng build --prod 构建生产应用程序然后在 Visual Studio 中运行它时，找不到图像。我猜这与角度资产文件夹的编译方式有关。所有图像都存储在 assets > images 中，然后像这样访问：

<img src="assets/images/buying.png" class="card-img-top" alt="photo">

在 Visual Studio 中，捆绑配置如下所示：

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        //            "~/Scripts/jquery-{version}.js"));

        //bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
        //            "~/Scripts/jquery.validate*"));

        //// Use the development version of Modernizr to develop with and learn from. Then, when you're
        //// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        //bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
        //            "~/Scripts/modernizr-*"));

        //bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
        //          "~/Scripts/bootstrap.js",
        //          "~/Scripts/respond.js"));

        //bundles.Add(new StyleBundle("~/Content/css").Include(
        //          "~/Content/bootstrap.css",
        //          "~/Content/site.css"));

        bundles.Add(new Bundle("~/Bundles").Include(
                   "~/bundles/runtime-es5.*",
                   "~/bundles/runtime-es2015.*",
                   "~/bundles/polyfills-es5.*",
                   "~/bundles/polyfills-es2015.*",
                   "~/bundles/main-es5.*",
                   "~/bundles/main-es2015.*"));

        bundles.Add(new StyleBundle("~/Content/Styles").Include("~/bundles/styles.*"));
    }
}

集成了angular应用的html：

 @{
    ViewBag.Title = "InfoTestAngular";
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>angular app</title>
    @Styles.Render("~/Content/Styles")
</head>
    <body>
        <div>
            <app-root></app-root>
        </div>
        @Scripts.Render("~/Bundles")
    </body>

    <script type="text/javascript">
    /* curator-feed-default-layout */
    (function () {
        var i, e, d = document, s = "script"; i = d.createElement("script"); i.async = 1;
        i.src = "https://cdn.curator.io/published/ccc71ec0-ceff-435f-9343-7e5d29f5b570.js";
        e = d.getElementsByTagName(s)[0]; e.parentNode.insertBefore(i, e);
    })();
    </script>
</html>

通过 Angular cli 在本地运行时的预期结果：

在 Visual Studio 中运行时：

【问题讨论】：

标签： c# html css angular visual-studio

【解决方案1】：

如果你的图片地址是这样的：

http://localhost:100/assets/images/buying.png

在图片标签的 src 中添加 ( / ) 以显示在其他地址中，如下所示
http://localhost:100/home/infoTest

<img src="/assets/images/buying.png" class="card-img-top" alt="photo">

【讨论】：

那行不通。它与角度如何编译捆绑包有关。