Bild nicht angezeigt (angularJS web-app)

Ich kann nicht für das Leben von mir herauszufinden, warum mein jpg-Bild nicht Rendern auf meinem lokalen Rechner. Ich bin das schreiben einer einfachen web-app mit AngularJS.

Ich habe die Bilder in einen "img" Ordner im gleichen Verzeichnis wie die home.html Datei.

Könnte es etwas falsch mit dem Bild? Ich bin in der Lage, um es zu öffnen und es sieht aus, rendert einwandfrei. Ich sehe keine Fehler in der Konsole, sondern nur ein broken image. Vielleicht ist es die Art, wie ich bin mit bootstrap oder eckig? Ich bin relativ neu für beide.

home.html code:

<!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>

Vielen Dank für Ihre Hilfe! Ich hoffe, es ist nur etwas blöd, ich bin mir Blick, denn ich habe gestarrt, auf das schon so lange und es sieht aus wie es sollte einfach sein.

  • home.html befindet sich im img-Verzeichnis ?
  • hast du irgendwelche Fehler in der Konsole?
  • Nein, home.html eine Ebene höher.
  • Ich habe einen Öffentlichen Ordner mit home.html in es. Ich habe den img Ordner innerhalb des Öffentlichen Ordners.
  • keine Fehler auf der Konsole.
InformationsquelleAutor epurdy | 2015-06-11
  1. 2

    Haben Sie Zugriff auf die Ordner in Ihrem lokalen Verzeichnis, wo die Bilder platziert werden
    durch Schrägstriche.ich.e wenn Sie den Ordner img, dann müssen Sie es in html über
    <img src="/img/test.jpg"/>

    • Ich habe gerade versucht, und es hat nicht funktioniert. der Ordner "img" ist nicht in der Wurzel. Es ist eine Ebene, die in einem "public" - Ordner. Dies ist der Ordner Struktur: "public/img/test.jpg" und dann die html-Datei befindet sich in "public/home.html". Macht das Sinn? Ich bin mit Winkel-Routen, um auf dem home.html Datei.
    • Wenn Sie die route der gebrochene Bild, es sieht aus wie was ?
    • Es ist komisch. Was ist die software, die Sie verwenden ? EasyPhp ? Normalerweise funktioniert dies . Zum Beispiel in easyphp der localweb ist "www" so können Sie home.html und den Ordner img in es. Wenn Sie entfernen die <base href='/'> und fügen Sie die "/" vor allem den link, funktioniert es ?
    • Danke, Martel! Das klappte! Es war die Basis-Referenz, warf diese aus. Ich geändert es zu <base href=">. Ich denke, mit angular 1.3, wenn Sie die Konfiguration Ihres location-Anbieter haben html5Mode auf, ist es am besten Praxis, um eine Basis-Referenz. Ich fand diesen Artikel hilfreich (wenn Sie neugierig sind): docs.angularjs.org/error/$location/nobase Gott sei Dank dieses Problem nicht gelöst wird, ich werde verrückt über etwas, das aussah, einfach zu sein!
    • Nur ein heads-up alle, ich fand, das war, weil ich nicht es läuft auf meinem localhost:8080 port (oder jeden port, für diese Angelegenheit). Einmal habe ich Hinzugefügt und konfiguriert haben server.js Datei und begann mit einem lokalen server, die <base href="/"> funktioniert perfekt!
    InformationsquelleAutor Martel Benjamin
  2. 0

    Manchmal src nicht mit eckigen. Verwenden data-ng-src statt.

    • Dies gilt nicht bieten eine Antwort auf die Frage. Zu Kritik oder fordern Sie die Klärung von Autor, lassen Sie einen Kommentar unten Ihre post - Sie können immer einen Kommentar auf deine eigenen Beiträge, und einmal haben Sie ausreichend Ruf Sie werden in der Lage sein Kommentar auf jedem post.
    • Mamoun Benghezal ok ich werde das nächste mal werde ich das erledigen.
    InformationsquelleAutor Sparsh Pipley
Schreibe einen Kommentar