Почему мои изображения не загружаются с использованием Angular 1.6 и Webpack 4?

Question

У меня есть angular 1.6.9. проект, который я создаю с помощью Webpack 4. Я не могу загрузить изображения, указанные в моем html. Вот мои настройки.

У меня есть контроллер, в который я загружаю html с базовым требованием c.

контроллер. js -

var config = function ($routeProvider) {
    $routeProvider.when('/data/algorithm-input', {
        controller: 'algorithmInputController',
        template: require("./algorithm-input.html")
    });
};

module.exports = { config, controller };

Мой html:

<div class="navbar-header" style="height:60px;padding-top:5px">
    <a class="navbar-brand">
        <img alt="Brand" src="../../../img/brand_inverse.png">
    </a>
</div>

И, наконец, моя конфигурация Webpack:

rules: [
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader'
        ]
    },
    {
        test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
        loader: 'url-loader'
    },
    {
        test: /\.html$/i,
        loader: 'html-loader',
        options: {
            attributes: true
        },
    },
    {
        test: /\.(png)$/,
        loader: 'file-loader'
    }
]

Вот что помещено в DOM:

<div class="navbar-header" style="height:60px;padding-top:5px">
    <img alt="Brand" src="[object Module]">
</div>

Я пробовал ng-src и src="${require('../../path')}". Ни один не работал.

Может кто-нибудь сказать мне, что я делаю не так?

Answer 1

Вот что я сделал, чтобы исправить мою проблему. Это немного обходной путь, но он работает.

В контроллере я импортировал изображение.

контроллер. js:

var logo = require('../../../img/brand_inverse.png').default

var controller = function ($scope) {
    $scope.logo = logo;
};

module.exports = { config, controller };

html:

<div class="navbar-header" style="height:60px;padding-top:5px">
    <a class="navbar-brand">
        <img alt="Brand" src="{{logo}}">
    </a>
</div>

Мне бы очень хотелось, чтобы он был импортирован прямо в html, но в настоящее время это позволяет мне отправлять.