使用webpack通过hrc在hrc中加载​​图像

Question

这可能是一个非常基本的问题，但我不知道如何做到这一点：

我有一个与webpack一起使用的AngularJs应用程序。

我对webpack的配置如下所示：

  module: {
    loaders: [
        {   test: /\.js$/, loader: 'babel-loader', 
            query: {    
                presets: ['es2015']}
        },
        {   test: /\.html$/, 
            loader: 'raw' 
        },
        {   test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
            loader: 'url-loader', 
            query: {
                limit: 1000000
            }
        },
        {   test: /\.css$/, 
            loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
        }
    ]
  }

当我在css文件中包含图像时，它可以正常工作。 （background-image: url('../all_symbols.svg');）

我现在想在我的模板中包含一个svg图像，如下所示：

<object data="paging.svg" type="image/svg+xml">

但我无法弄清楚如何做到这一点。我通过将其导入我的控制器然后动态添加它找到了解决方案：

import img from 'paging.svg';

function myController($scope) {
    $('#insert-here').html('<object data="'+img+'" type="image/svg+xml">');
}

但我有丝毫感觉必须有比这更好的方法。

Answer 1

在html文件中尝试此{{paging.svg}}。将图像路径粘贴到双花括号内。

Answer 2

在Ricky sharma的评论的帮助下，我刚刚找到（或者？）答案。虽然{{paging.svg}}不起作用（因为$ scope不知道导入文件的任何内容），但如果使范围知道该文件，它显然有效。所以在我的情况下，这将看起来如下：

import img from 'paging.svg';

function myController($scope) {
    $scope.myimage = img;
}

然后<object data="{{myimage}}" type="image/svg+xml">