Get Real Image Pfad von JSON Antwort

Question

Ich habe einen lokalen Express-Server, der eine JSON-Datei dient. Ich habe auch viele Bilddateien in einem lokalen Ordner. Die Bildpfade sind Teile des JSON-Objekts, das ich in meinem DOM anzeigen möchte. Allerdings erhalte ich eine String-Darstellung dieser Bildpfade als Teil der Antwort, die ich nicht verwenden kann. Was ist der beste Weg, lokale Bilder von einem lokalen Server auf das Frontend zu portieren?

Ein Bild von der Ausgabe:

Meine Server-Seite config:

app.use(express.static(path.join(__dirname, 'public'))) 
 
app.use(express.static(path.join(__dirname, 'server/img')))

Meine JSON-Datei

{ 
 
    "Images": [{ 
 
    "title": "First Block", 
 
    "images": ["server/img/bijay.jpg", "server/img/dance.png", "server/img/ocean.jpg"] 
 
    }, {obj2}, {obj3}, {obj4}] 
 
}

Mein clientseitigen Code Bild

<ul> 
 
    <li ng-repeat="obj in objArray"><img ng-src="{{obj.images[0]}}"></li> 
 
</ul> 
 
// just testing first image

Meine Ordnerstruktur drucken:

Im Alter ist in der IMG-Ordner.

Platz in einem ‚öffentlichen‘ Ordner die Bilder: hier nicht Raum auf die Kommentare von @Tolsee

Answer 1

Endlich nach viel Umdenken fand ich die Lösung.

Ich hatte den 'statischen' Ordner auf dem Server als 'server/img' definiert. Innerhalb des Json-Objekts habe ich jedoch den absoluten Pfad für die Bilddateien erneut zugewiesen. Alles, was ich tun musste, war ' server/image/ imgFileName.jpg' den Konflikt zu lösen :))

Answer 2

Basierend sparen gezeigt. (/public/img/dance.png) Dann in Ihrer ausdrücklichen App die folgende Zeile:

let app = express(); 
app.use(express.static(path.join(__dirname, 'public'))); 

Die Bilder werden mit der folgenden URL zur Verfügung:

localhost:port/img/dance.png 

Sie könnten nur dienen/server/img und dann einfach folgendes verwenden:

let app = express(); 
app.use(express.static('/server/img')); 

localhost:port/dance.png 

Abhängig von Ihrer Projektstruktur sind möglicherweise einige Konfigurationen erforderlich.