我正在使用 Webpack 来捆绑我的 Aurelia 应用程序。我编写了一个自定义属性，该属性为我应用它的任何元素提供视差效果。它工作得很好。我不确定如何让 Webpack 检测我的标记中的图像引用并捆绑引用的图像。
<div id="hero" scroll-parallax="image-extend: 50; image-file-height: 2688; image-file-width: 4000; image-source: ../media/hero.jpg; background-position: center top;">
在Aurelia生命周期中，图像作为子<img>元素插入到DOM中，例如createElement('img')和img.src = this.imageSource。
我探索了使用html-loader.attrs但从我最初的测试中，它试图使用整个属性值，而不是解析图像值的属性。
我还尝试在我的视图模型中只使用使用 CustomAttribute 的require语句，虽然图像确实被添加到捆绑包中，但标记中对图像的实际引用没有像标准<img src="">那样正确替换。
我还探索了更改src在自定义属性中的设置方式以使用requires(this.imageSource)。这会导致 Webpack 警告"关键依赖关系"(因为依赖关系的理论动态性质)，并且图像没有捆绑。
我意识到我可以配置复制文件插件来复制我需要的图像，但我想要的是加载器检测上述image-source，捆绑图像(通过url-loader或file-loader)并替换引用，就好像它是标准src一样。有没有办法通过组合内置加载器来实现这一点，或者是否需要一个或多个自定义加载器？或者我应该探索以更"友好"的方式包含图像资源？
几个选项，我相信还有更多方法：
- (难度：高)编写自己的 webpack 加载器/扩展 html-loader 插件来解析它
- (难度：简单)将图像源分解为自己的属性，从当前属性中解析该属性，然后在 html-loader 中使用
attr选项，以便 webpack 找到/包含它：https://github.com/webpack-contrib/html-loader#advanced-options - (难度：简单)将图像放在构建时复制的静态文件目录中，Aurelia CLI webpack 脚手架项目已经这样做了，因此您可以在那里包含图像。 我相信它们在启动
au run时只被复制一次，所以如果你添加新的图像，你必须重新启动它。