加載圖像由src在HTML中的WebPack

這可能是一個非常基本的問題，但我不得到解決如何做到這一點：加載圖像由src在HTML中的WebPack

我有一個AngularJs應用程序，我用的WebPack使用。

我給的WebPack配置看起來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") 
     } 
    ] 
    }

它完美，當我包括我的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">'); 
}

但我沒有絲毫的感覺，有比這更好的辦法。

來源

2017-09-05 LocalHorst

在html文件中嘗試使用{{paging.svg}}。將圖像路徑粘貼到雙大括號內。

來源

2017-09-05 13:28:57

，我們必須通過在$範圍圖像路徑是正確的@LocalHorst –

在Ricky sharma的意見幫助下，我剛剛找到（或？）答案。儘管{{paging.svg}}不起作用（因爲$ scope不知道導入文件的任何內容），但如果您知道文件的範圍使知道該文件，它顯然可以工作。所以在我的情況下，這看起來如下：

import img from 'paging.svg'; 

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

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

來源

2017-09-05 14:00:56 LocalHorst

加載圖像由src在HTML中的WebPack

回答

相關問題