Question

我不能为我的生活找出为什么我的jpg图像不能在我的本地计算机上呈现。我正在使用AngularJS编写一个简单的Web应用程序。

我将图像放在与home.html文件相同的目录中的“img”文件夹中。

图片有问题吗？我可以打开它，它看起来很好。我也没有在控制台中看到任何错误，只是图像损坏了。也许这是我使用bootstrap或angular的方式？我对两者都比较陌生。

home.html代码：

<!DOCTYPE html>
<html data-ng-app="MainApp">
    <head>
        <title>FedCup 5k</title>
        <!--angular uses this base element which path to use when it gets any front end resource- this is the root b/c of "/"-->
        <base href='/'>
        <link rel="stylesheet" type="text/css" href="src/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class='container'>
            <div class='page-header'>
                <h1>FedCup 5k</h1>
                <div class="row">
                    <div class="col-sm-12">
                        <img src="img/test.jpg"/>
                    </div>
                </div>
            </div>
                    <!--the place holder to render our view dependent on the route-->
            <div class="row">
                <div class="col-sm-12" data-ng-view>
                </div>
            </div>
        </div>

        <script type='text/javascript' src="lib/jquery/dist/jquery.min.js"></script>
        <script type="text/css" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script>
        <script type="text/javascript" src="src/app.js"></script>
        <script type="text/javascript" src="src/controller.js"></script>
        <script type="text/javascript" src="src/factories.js"></script>
        <script type="text/javascript" src="src/filter.js"></script>

    </body>
</html>

非常感谢你的帮助！我希望这只是一些我忽略的愚蠢，因为我已经盯着它看这么久了，看起来应该很容易。

Answer 1

您必须访问放置图像的本地目录中的文件夹通过slashes.i.e如果你有文件夹img然后你必须通过html访问它 <img src="/img/test.jpg"/>

Answer 2

有时src无法使用角度。请改用data-ng-src。

图像未显示（angularJS网络应用程序）

2 个答案: