Javascript 通过src在带有网页的html中加载图像

这可能是一个非常基本的问题，但我无法回避如何做到这一点：

我有一个AngularJs应用程序，我在webpack中使用

我的Web包配置如下所示：

  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文件中包含图像时，它可以完美地工作。（

背景图像：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">');
}

从“paging.svg”导入img；
函数myController（$scope）{
$（'#此处插入'）.html（''）；
}

---

但是我有一点感觉，一定有比这更好的方法。

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

在注释的帮助下，我刚刚找到了（或a？）答案。尽管{paging.svg}}不起作用（因为$scope不知道导入文件的任何内容），但如果让作用域知道文件，它显然是起作用的。因此，在我的情况下，这将如下所示：

import img from 'paging.svg';

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

---

然后

是@LocalHorst right我们必须在$scope中传递图像路径