Wie man das öffentliche Verzeichnis

Benutze ich Winkel-cli in meinem Projekt, und ich möchte an einem globalen Bild - meine website-logo-image.

Da verstehe ich die public im Stammverzeichnis des Projekts (welches angular-cli erstellt) ist für öffentliche Einrichtungen - das scheint wie ein guter Ort, um mein Bild (bitte korrigiert mich wenn ich falsch Liege).

Aber, wenn ich versuche, um das Bild in meinem <img src="/public/book4u-logo.svg" /> tag, bekomme ich 404. Der Grund ist, natürlich, mein Projekt root ist der src Verzeichnis und nicht in das Projekt-root-Verzeichnis.

So, wie soll ich zu diesem Verzeichnis? Oder soll ich mein Bild in ein anderes Verzeichnis?

Mein Projekt Baum (ich Entferne die unnötigen suff):

.
├── angular-cli-build.js
├── angular-cli.json
├── package.json
├── public
│   ├── book4u-logo.svg
│   └── hero-image-default.jpg
├── src
│   ├── app
│   │   ├── bfy.component.html
│   │   ├── bfy.component.scss
│   │   ├── bfy.component.ts
│   │   ├── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── system-config.ts
│   ├── tsconfig.json
│   └── typings.d.ts
├── tslint.json
└── typings.json

Den img tag ist bei /src/app/bfy.component.html und das Bild selbst ist auf /public/book4u-logo.svg.

src/shared/assets/img/ macht Sinn für mich.
Es sollte nur <img src="/book4u-logo.svg" />.. Alles in public/ kopiert dist/ was ist der "root-Ordner" für Ihre app..

InformationsquelleAutor Nir | 2016-06-19

  1. 6

    Den Angular-cli legt alle Dateien in der /dist Verzeichnis.

    Wird das Bild in index.html:
    <img src="book4u-logo.svg" />

    Wenn Sie verwenden möchten Ihr Bild in Ihrer app sollten Sie einen Ordner verwenden, in der /src Verzeichnis wie src/shared/assets/img/book4u-logo.svg

    Ist der öffentliche Ordner für das öffentliche Vermögen und die Inhalte kopiert werden, um die /dist Ordner.
    Aber bei der Ausführung ng build --prod den javascript-Code in die/public Ordner wird nicht kopiert, über /dist.

    Gibt es eine open-issue auf Github:Statische JS-assets nicht kopieren
    Das Bild in den öffentlichen Ordner zugegriffen werden soll, von der dist Ordner.

    InformationsquelleAutor KB_

  2. 5

    Neueste version von angular-cli(angular-cli: 1.0.0-beta.19-3) bietet einen assets Ordner unter src-Verzeichnis. Sie brauchen nur zu addieren src-Eigenschaft des image-tag als unten
    <img src="./assets/logo.png">

    Hinweis: Wenn Sie das Projekt erstellen mit ng serve wird es kopieren Sie Ihre assets Ordner zu dist Ordner.

    es macht deutlich, dass Sie verwenden sollten "./Vermögenswerte" eher "./src/..." ... war Alter kratzen meinem Kopf auf...

    InformationsquelleAutor Suchin

  3. 1

    Löste ich ein ähnliches problem, im Winkel 4 (ich hatte eine css-Datei in den öffentlichen Ordner und ich habe es im Ordner "assets").
    Die Antwort wäre:

    • Datei-Pfad: ./src/assets/book4u-logo.svg
    • <img src="./assets/book4u-logo.svg>

    InformationsquelleAutor Joey Sobrinos

Schreibe einen Kommentar