Question

上下文

我希望能够编写一个可重用的Angular2组件，该组件显示自定义图像，并且可以被多个其他组件使用。我希望显示的图像能够自定义，通过它在模板中使用的变量。但是在使用Webpack构建时，Webpack会在将文件打包在一起时尝试按照模板中的链接进行操作，但找不到{{ variableName }}。

守则

在我的Angular2模板中：

<img src='{{ imgToShow }}' />

在我的Webpack配置中：

  {
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
    loader: 'file?name=assets/[name].[hash].[ext]'
  },

尝试构建时，Webpack会出现以下错误：

Module not found: Error: Can't resolve '{{ imageToShow }}'

我已经尝试强行包装所有图片：

在Webpack配置中：

entry: {
  'img': './app/img.js',
  'app': './app/app.js'
}

在 app / img.js ：

function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./assets/img/', true, /(\.png|\.jpg|\.gif)$/));

但它仍然无效。 Webpack仍然尝试加载文件，即使我从配置中的加载器中删除png和jpg匹配器，Angular2仍然无法在运行时处理该文件。

如何使用Webpack在Angular2中动态显示不同的图像？

Answer 1

试试这个

<img [src]=' imgToShow ' />

现在可以动态更改imgToShow。

使用Angular2的Webpack不遵循动态链接

1 个答案: