Angular 2 img src в относительном пути

Руководство по стилю johnpapa Angular 2 предлагает пошаговая настройка. Я получаю эту идею, вы можете создавать автономные компоненты Angular, которые можно использовать повторно.

Итак, я создал компонент, который хотел повторно использовать в другом проекте, и поместил его в свою собственную папку. Я также добавил изображение, которое я хотел, чтобы этот компонент отображался в одну и ту же папку, поэтому все это было само собой.

<img class="logo" src="logo.png"/>

Но это пытается затем загрузить изображение из корня localhost:3000/logo.png.

Я полагаю, это означает, что я должен фактически использовать точный путь к изображению, но разве это не подрывает всю идею компонентов, которые могут быть повторно использованы в другом проекте другими людьми?

Предложения по этому поводу?

Изменить для пояснения Я использую структуру папок из Angular 2 quickstart, то есть моя корневая папка:

app/
node_modules/
index.html
package.json
tsconfig.json

Итак, даже если я использую заголовок пути /logo.png, он не работает. Я должен сделать app/header/logo.png. Это фактически абсолютный путь, и на самом деле работает одинаково, если я добавлю косую черту: "/app/header/logo.png". Все, что меньше полного пути, нарушает связь. Если кто-то захочет повторить его использование, он должен иметь ту же структуру папок.

Я думаю, это как раз то, как это работает, я только изучаю Angular 2, но, на мой взгляд, я должен иметь возможность загружать активы из папки компонентов, как я могу, с помощью шаблона или css

Ответы

Ответ 1

Я использую webpack и смог преодолеть эту проблему require с изображением в компоненте как переменной и используя это в своем шаблоне.

Это связано с тем, что во время фазы связывания веб-пакет загружает ресурс и сохраняет правильный URL-адрес, а требование вызова во время выполнения получит этот правильный URL-адрес для перехода к шаблону.

Пример

Использование следующей структуры каталогов

app/
    header/
        header.component.ts
        header.component.html
        assets/
            logo.png
...

header.component.ts

...
@Component({
    selector: 'header',
    templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
    private LOGO = require("./assets/logo.png");

    constructor() {};
}

header.component.html

<div>
    <img [src]="LOGO" />
</div>

По общему признанию, это связывает компонент и шаблон, но требование должно быть в компоненте, чтобы webpack мог анализировать и загружать его при связывании.

При таком подходе я упаковал свой модуль с помощью npm и установил его и использовал в другом проекте, который также использует webpack.

Я еще не тестировал SystemJS.

Ответ 2

Я решил бы эту проблему, разделив путь src на 2 части, например:

<img class="logo" src="{{imgPath + imgFileName}}" />

то внутри определения компонента вы устанавливаете:

@Input() imgPath:string = "app/header/";
imgFileName:string = "logo.png";

Используя декоратор @Input(), переменную imgPath можно увидеть извне, так что, если вы переместите компонент в другое место, вы можете установить другой путь, сделав компонент повторно используемым.

Ответ 3

Используйте папку с ресурсами в своем корне, содержащую изображение логотипа

Ответ 4

Если проблема связана с ошибкой 404, вам нужно изменить свой путь

из пути/изображения ( root/путь/образ, /путь/изображение и т.д.)

до ./путь/изображение

Затем он должен работать, если нет других проблем.

Ответ 5

Проверьте этот ответ: как обслуживать изображения в angular2

Ключ должен либо поместить его в папку "активы", либо отредактировать файл ".angular-cli.json" (раздел активов), чтобы указать местоположение, в котором находится изображение. Это справедливо и для других ресурсов, которые должны быть поданы, т.е. Таблиц стилей.