Angular 2+ Speichern und Zugriff auf dynamische Bildbibliothek

Ich benutze Angular-CLI für diesen Build und kompiliert alle Ordner unter dem Ordner Src in den Build. ich Bilder in den Aktiv Ordnern unter src Speicherung:Angular 2+ Speichern und Zugriff auf dynamische Bildbibliothek

src |-app |-assets |-img_library

ich sie so dynamisch zugreifen: <img src="assets/img_library/{{imgId}}"

Leider wird dieser Ordner in die Build von Winkel-cli zusammengestellt, so würde ich müssen die App jedes Mal neu erstellen, wenn ein Image hinzugefügt wird, damit der Client darauf zugreifen kann.

Ich baute den Server auch so, dass ich die Bilder speichern kann, wo ich will, aber ich weiß nicht, wie man auf Ordner über dem src über einen img Tag zugreifen kann.

Gibt es eine Möglichkeit, über den Ordner src mit einem Image-Tag in Angular auf einen öffentlichen/Assets-Ordner zuzugreifen?

Quelle

2017-07-18 Nayfin

Das macht keinen Sinn - wenn Sie auf einen Assets-Ordner außerhalb von 'src /' zugreifen, müssen Sie * ihn * noch hinzufügen und neu aufbauen, wenn Sie Bilder hinzufügen. Stattdessen teilen Sie die App auf - haben Sie eine einfache API oder etwas, das eine Liste von Links zurückgibt und dann können sie * überall * leben (gleicher Server, anderer Server, S3, CDN, ...). – jonrsharpe

Wenn es eine Möglichkeit gibt, auf einen Ordner zuzugreifen, der über meinem src-Ordner gespeichert ist, müsste ich nicht neu erstellen, da er nicht in den Build kompiliert würde. Der Aufbau einer API, um über ein Bild-Tag auf Bilder zuzugreifen, scheint mit einem Bulldozer einen Ameisenhügel umzuwerfen. Aus diesem Grund hätten Sie in der herkömmlichen Webentwicklung einen öffentlichen Ordner für diese Assets. – Nayfin

Nicht in den Build kompiliert ist ein * Problem *, keine Lösung. Wie stellen Sie sicher, dass es an der richtigen Stelle ist, wenn Sie es bereitstellen? Und wie entdeckt die App Bilder? – jonrsharpe

@jonrsharpe Sie haben Recht, das macht keinen Sinn. Der Ordner "Assets" ist für Bilder/Medien vorgesehen, die von den meisten Benutzern häufig verwendet werden. Ich weiß nicht, was ich dachte, mein Gehirn steckte im Angular-Modus, als ich es vom Backend aus angehen musste.

habe ich eine ausdrückliche api:

router.get('/some/api/:id/img.png', function(req, res, next){ 

    var id = req.params.id, 
     filePath = 'img.png', 
     root = __dirname + '/some/location/' + id +'/'; 

    var options = { 
     root: root, 
     dotfiles: 'deny', 
     headers: { 
      'x-timestamp': Date.now(), 
      'x-sent': true 
     } 
    }; 

    res.sendFile(filePath, options, (err) => { 
     if (err) { 
      next(err); 
     } else { 
      console.log('Sent:', filePath); 
     } 
    }); 
})

zu einem Get-Anforderung von <img src='some/api/{{imageId}}/img.png'> zu reagieren.

Hoffe, das hilft ein paar andere schlaflose Entwickler.

Quelle

2017-07-19 02:59:32 Nayfin

Angular 2+ Speichern und Zugriff auf dynamische Bildbibliothek

Antwort

Verwandte Themen