为什么我的图片没有使用 Angular 1.6 和 Webpack 4 加载？答案

【问题标题】：Why are my images not loading using Angular 1.6 and Webpack 4?为什么我的图片没有使用 Angular 1.6 和 Webpack 4 加载？
【发布时间】：2020-03-01 02:50:41
【问题描述】：

我有一个 1.6.9 的角度。我正在使用 Webpack 4 构建的项目。我无法在我的 html 中指定要加载的图像。这是我的设置。

我有一个控制器，我在其中加载带有基本 require 语句的 html。

controller.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')}"。都没有奏效。

谁能告诉我我做错了什么？

【问题讨论】：

标签： angularjs webpack

【解决方案1】：

这是我为解决我的问题所做的。这是一种解决方法，但确实有效。

在控制器中我导入了图像。

controller.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 中，但这目前允许我发布。

【讨论】：