webpack - Aurelia、webpack 和对图像的动态引用

Question

假设我们有这样的标记(多个 tbody，我知道)。

<tbody repeat.for="order of orders">
  <tr repeat.for="line of order.lines">
    <td>
      <img if.bind="order.urgent === 'T'" src="../app/alert.svg">
      <img if.bind="line.outOfSquare" src="../app/oos.svg">
    </td>
    <td class="min-width">
      <img src.bind="'../app/'+line.type+'.svg'" alt="${line.type}">
    </td>
  </tr>
</tbody>

在 dotnet new Aurelia 创建的默认项目中这些图像作为 DataUrls 内联，因为它们很小。这是合理的，但它们会根据绑定(bind)数据在许多行中重复。调整 webpack.config.js 以将阈值降低到 1024 字节，我们有

{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=1024' }

现在图像以散列名称出现在 wwwroot/dist 中，并且 URL 被重写。计算出的 URL 目标也通过这个添加捆绑到 webpack.config.js

  ,new GlobDependenciesPlugin({
    "boot": [
      "ClientApp/app/components/**/*.svg"
    ]
  })

不幸的是，计算的 URL 没有被重写。

src.bind="'../app/'+line.type+'.svg'"

他们现在坏了。

如何在运行时解析应用程序相对路径？

我们需要在运行时解决这个问题，但到目前为止我找不到任何支持这样做。已经提出了各种可能性:

完全抑制图像处理并使用构建任务来打包它们

使用 require 在运行时转换 URL

使用带有静态 URL 和原始 URL 作为 id 值的充满 imgs 的隐藏 div，然后使用它们在运行时进行映射。

我自己的研究表明，有一些 webpack 插件将这些映射作为 json 发出，但是我对 Aurelia 构建过程的浅薄理解不允许我利用它——除此之外，我不知道如何导致这个输出可用于应用程序。

这似乎是相关的，但无知阻碍了我。 How to load image files with webpack file-loader

我尝试使用 require 没有奏效，但我怀疑在 Aurelia 模块中自动在范围内的 require 方法不是可能解析映射的 Webpack 要求。大概 webpack 可以在运行时加载和解码打包的应用程序，但我真的不知道，因为到目前为止它刚刚工作，让我可以在幸福的无知中操作。

我知道我可以通过使用对资源的静态引用分别处理每种线型来将其嵌入到页面中，如下所示:

<img if.bind="line.type === 'AL'" src="../app/al.svg">
<img if.bind="line.type === 'GD'" src="../app/gd.svg">

但这是高维护代码。

另一种可能性是走另一条路。借用放置一个充满imgs的隐藏div的建议，如果这些都是内联的，那么可以使用绑定(bind)复制图像。

Answer 1

与 require.context你可以告诉 webpack 打包所有匹配特定模式的文件，然后使用创建的上下文在运行时动态解析它们的路径。

使用单一上下文和长路径解析所有图像

假设您有一个文件夹 src/assets/images里面有你所有的图像。其中一张图片名为 image-1.jpg .您可以创建一个文件 src/images.js像这样:

const imageContext = require.context(
  ".",
  true,
  /^\.\/.*\.(jpe?g|png|gif)$/i
);
export { imageContext };

此上下文将(递归地)包括 src 下的所有图像.然后在，例如 app.js ，导入并使用它来解析您的图像:

import { imageContext } from "./images";

export class App {
    constructor() {
        this.img = imageContext("./assets/images/image-1.jpg"); 

        // resolved: '/src/assets/images/image-1.f1224ebcc42b44226aa414bce80fd715.jpg'
    }
}

<img src.bind="img">
解析特定文件夹中的图像，短路径

注意:您传递给上下文以解析图像的路径必须相对于您在声明时传递给上下文的路径。所以如果你有一个 src/assets/images.js像这样:

const imageContext = require.context(
  "./images",
  true,
  /^\.\/.*\.(jpe?g|png|gif)$/i
);
export { imageContext };

然后在 src/app.js你会这样做:

import { imageContext } from "./images";

export class App {
    constructor() {
        this.img = imageContext("./image-1.jpg"); 

        // resolved: '/src/assets/images/image-1.f1224ebcc42b44226aa414bce80fd715.jpg'
    }
}

加载具有特定模式的所有图像

如果您为要一起显示的每组图像创建一个上下文，它会变得更加容易:

src/pages/album/album.js:

const ctx = require.context(
  "../../assets/images",
  true,
  /^\.\/.*some-special-pattern.*\.(jpe?g|png|gif)$/i
);

export class Album {
    constructor() {
        this.images = ctx.keys().forEach(imageContext);
    }
}

<img repeat.for="img of images" src.bind="img">
让 Aurelia 施展魔法

例如创建一个 ValueConverter:

src/resources/converters/image-context.js:

const imageContext = require.context(
  "../../",
  true,
  /^\.\/.*\.(jpe?g|png|gif)$/i
);

export class ImageContextValueConverter {
    toView(name) {
        const key = imageContext.keys().find(k => k.includes(name));
        return imageContext(key);
    }
}

src/resources/index.js

import { PLATFORM } from "aurelia-pal";

export function configure(config) {
    config.globalResources([
        PLATFORM.moduleName("resources/converters/image-context")
    ]);
}

然后在其他任何地方，例如获取 src/assets/images/image-1.jpg:
<img src.bind="'image-1' | imageContext" >

网址加载器问题

当我试图在我的项目中这样做时，我遇到了 url-loader 的问题。我无法让它工作。感觉 url-loader 被最新的 webpack 版本破坏了，因为它也忽略了 limit选项。我不得不完全抛弃 url-loader 来处理图像。如果/当我让它工作时，我会更新我的答案。