Wie man ein Bild von einem JSON-Objekt in eine Seite einfügt?

Question

Ich schreibe eine Nachrichten-Website und mit allen Nachrichten in JSON-Dateien gespeichert. Hier ist ein Beispiel für das JSON-Schema:

Wie kann ich Bilder in der richtigen Position erscheinen lassen?
(Ich benutze Nunjucks Templating-Engine, wenn es für die Antwort nützlich ist)

Answer 1

Ich denke, Sie sollten Ihr JSON-Schema wenn möglich ändern.

{ 
    "title": "Lorem Ipsum", 
    "bodies": [ 
    { 
     "text": "Qui Quo Omnis Nulla Porro Quidem Quisquam Consequuntur Neque Expedita Iu", 
     "image": "path/to/image1" 
    }, 
    { 
     "text": "Blah blah blah", 
     "image": "path/to/image2" 
    } 
    ], 
    "author": "author" 
} 

Dann werden Sie wissen, dass das Bild immer nach dem Text gehen sollte. Sie können sogar einen leeren Text hinzufügen, um mit einem Bild zu beginnen.

Edit: Nur zum Spaß habe ich ein kurzes Skript zusammengestellt, das ein Array mit dem Nachrichtentext und dem darauf folgenden Bild erstellt. Ich denke immer noch, dass Sie stattdessen Ihr Schema aktualisieren sollten.

var myNew = {...} 
var magic = myNew.body.split(/\[.*?\]/).filter(n=>n); 
var whatsthis = magic.reduce((fullArray,text, index)=>{ 
    fullArray.push(text); 
    fullArray.push(test.images[index]); 
    return fullArray; 
}, []); 

console.log(whatsthis); 

Dies gibt ["Qui Quo Omnis Nulla Porro Quidem Quisquam Consequuntur Neque Expedita Iu ", "path/to/image1", ". Nditiis Mollitia Facere Adipisci Fugiat Minus Ve…ia Assumenda Obcaecati Veritatis Minima Dicta Im ", "path/to/image2"] aus.

https://jsfiddle.net/Lfpab33y/

Wenn es Dinge einfacher macht, können Sie

fullArray.push(text); 
fullArray.push(test.images[index]); 

in

fullArray.push({type:"text", content:text}); 
fullArray.push({type:"imagePath", content:test.images[index]}); 

ändern, so wissen Sie, ob es sich um Text oder imagePath und etwas dagegen tun in Ihrer Vorlage.