Loading images by src in html with webpack

Question

This may be a very basic question but i dont get around how to do this:

I have a AngularJs App that I use with webpack.

My configuration for webpack looks the folllowing:

  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") 
        }
    ]
  }

It works perfectly when I include images in my css file. ( background-image: url('../all_symbols.svg'); )

I now want to include an svg image in my template like this:

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

But I can't figure out how to do so. I found a solution by importing it into my controller and then adding it dynamically:

import img from 'paging.svg';

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

But I have the slightest feeling there has to be a better way than this.

Answer 1

try this {{paging.svg}} in html file. paste image path inside double curly brackets.

Answer 2

With help by the comment of Ricky sharma I just found the (or a?) answer. Though {{paging.svg}} does not work (as $scope does not know anything of the imported file) it clearly works if you make the scope know the file. So in my case this would look the following:

import img from 'paging.svg';

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

and then <object data="{{myimage}}" type="image/svg+xml">