Angular JS mit Grunt: Anzeigen von Bildern aus dem lokalen Ordner mit relativen Pfad von JSON

Question

So verwende ich ein JSON, das viele Daten über den Benutzer einschließlich Bilder zurückgibt. Das Problem, dem ich gegenüberstehe, ist, dass ich glaube, dass der relative Pfad zum Bilderordner korrekt ist, aber aus irgendeinem Grund heißt es in ng-source="relativePath" anstelle des Bildes. Die einzige Schlussfolgerung, zu der ich kommen kann, ist, dass entweder der Pfad falsch ist oder ich eine Art Import für die Bilder brauche, die im Projekt verwendet werden sollen.

<div ng-repeat="results in userInfo.images"> 
    <figure class="img"> 
    <img data-ng-source="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" /> 
    </figure> 
</div> 

Ich habe versucht, Quelle, ng-Quelle und Daten-ng-Quelle. Wenn ich in der Konsole und im HTML-Format für Image src anschaue, wird der relative Pfad /images/profilePicture.png angezeigt.

Mein Projekt hat die folgende Struktur:

Repositry Name 
    app 
    css 
    home 
    home.module.js 
    home.tpl.html 
    images 
    profilePicture.png 
    js 
    resources 
    app.js 
    index.html 

Best Practices Mit der index.htlm der Behälter für die einzelne Seite Anwendung. Wir verwenden die Seite home.tpl.html, die in die container-Seite index.html eingefügt wird.

Ich habe versucht, den Pfad zu wechseln direkt von index.html gehen ->/images/profilePicture.png sowie von home.tpl.html ->../images/profilePicture.png.

Ich konnte keine Beiträge finden, die für meine Situation relevant sind, aber ich glaube, dass Sie vielleicht eine App.use oder eine Art Injektionsmethode benötigen, um den Ordner mit Bildern hinzuzufügen, der verwendet werden kann?

Hinweis: Ich bin nicht sicher, ob dies jedoch hilfreich ist, wenn ich grunzen Build laufen stattdessen ich dienen überprüfen Sie die dist Ordner und der Bildordner in der Tat hat alle Bilder.

Jede Hilfe, warum dies nicht funktioniert, wird sehr geschätzt, da ich mein Gehirn zerbrach und versuchte herauszufinden, warum das nicht funktioniert.

Vielen Dank im Voraus, wenn Sie weitere Informationen benötigen, kommentieren Sie unten und ich würde mich freuen, es zur Frage hinzuzufügen.

Answer 1

ändern <img data-ng-source Erklärung nur ng-src verwenden:

<img ng-src="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" /> 

Weitere Details unter w3schools: ng-src