Очень просто: требуются изображения в webpack и Angular 2

У меня возникают проблемы с изображениями на моем веб-сайте Angular 2.

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

Например, на данный момент у меня есть:

<img src='${require("../images/logo.png")}'>

Файл, содержащий это изображение, является частью шаблона, который требуется следующим образом:

@Component({
    selector: 'appstore-app',
    directives: [ ...ROUTER_DIRECTIVES ],
    styles: [require('../sass/appstore.scss').toString()],
    template: require('./app.component.html')
})

Это приводит к ошибке в браузере:

GET: http://localhost:8080/$%7Brequire(%22../images/logo.png%22)%7D

Мой загрузчик для изображений image my webpack.config.js выглядит так:

{ test: /\.(png|jpg|gif)$/, loader: "url-loader?limit=50000&name=[path][name].[ext]" }

Я вполне могу смешивать синтаксисы здесь, но, как я уже сказал, я пробовал несколько методов. Это не работает. $Require делает его в HTML дословно без преобразования!

Как скопировать изображения в папку сборки или упаковать их как DataURL?

Пожалуйста, помогите!

Ответ 1

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

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

//note styleUrl and templateUrl since you have a path not inline with component
        @Component({
            selector: 'appstore-app',
            directives: [ ...ROUTER_DIRECTIVES ],
            styleUrl: ['../sass/appstore.scss'],
            templateUrl: './app.component.html'
        })

Ответ 2

Нашел ответ.

Нет необходимости требовать $src в изображении; webpack справится с этим с помощью правого загрузчика.

Ответ 3

Например

<img src={{appstore-logo}}>

и ваш код компонента

@Component({
    selector: 'appstore-app',
    directives: [ ...ROUTER_DIRECTIVES ],
    styles: [require('../sass/appstore.scss').toString()],
    template: require('./app.component.html')
})
export class AppStoreComponent {
    private appStoreImage: any = require('../images/logo.png');
}

Вы должны вставить этот код перед применением этого компонента.

declare function require(name: string): string;

этот код в вашем AppModule

Пожалуйста, дайте мне знать, если есть лучший способ.

Ответ 4

Я не доказал этого, но это общая идея:

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

$scope.imageSrc = require('../images/logo.png');

И затем в вашем шаблоне imageSrc будет либо закодированным base64, либо URL-адресом данных в соответствии с конфигурацией вашего загрузчика.

<img src='{{imageSrc}}'>