使用 webpack 在 html 中通过 src 加载图像答案

【问题标题】：Loading images by src in html with webpack使用 webpack 在 html 中通过 src 加载图像
【发布时间】：2018-02-13 16:19:53
【问题描述】：

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

我有一个与 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">');
}

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

【问题讨论】：

标签： javascript html angularjs svg webpack

【解决方案1】：

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

【讨论】：

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

【解决方案2】：

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

import img from 'paging.svg';

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

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

【讨论】：